import { styled } from 'styled-components';
import { useState, useRef, Fragment, useEffect } from 'react';

import Button from '../../common/button/Button';
import CheckBox from '../../common/input/CheckBox';
import Modal from '../../common/modal/Modal';

import { Title, BtnWrapper, SelectInput, TextInput, DatePickerWrapper, InputLabel, Textarea, ModalText, SearchBarAlert } from '../../../styles/Components';
import CloseIcon from '../../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../../common/Date/DatePickerComponent';
import { HourList, MinuteList } from '../../../assets/data';
import { NoticeModify } from '../../../apis';
import { useTranslation } from 'react-i18next';
import { convertKTC, convertKTCDate } from '../../../utils';
import { languageType } from '../../../assets/data/options';

const BoardInfoModal = ({ detailView, setDetailView, content, id, setIsCopyData, openRegistModal, userInfo }) => {
	let viewOnly = userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 17); // 조회만 가능 권한
	let updateAuth = userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === 17); // 등록 가능 권한
	const NOW_DATE = new Date();
	const { t } = useTranslation();

	const [copyView, setCopyView] = useState('hidden');
	const [sendHour, setSendHour] = useState('00');
	const [sendMin, setSendMin] = useState('00');
	const [endHour, setEndHour] = useState('00');
	const [endMin, setEndMin] = useState('00');
	const [repeatHour, setRepeatHour] = useState('00');
	const [repeatMin, setRepeatMin] = useState('00');

	const [modifyModal, setModifyModal] = useState('hidden');
	const [completeModal, setCompleteModal] = useState('hidden');
	const [registView, setRegistView] = useState('hidden');

	const [isPast, setIsPast] = useState(false);

	const [resultData, setResultData] = useState({
		send_dt: '',
		end_dt: '',
		message_type: 'CHATTING',
		is_repeat: true,
		repeat_type: 'COUNT',
		repeat_dt: '00:00:00',
		repeat_cnt: '1',
		game_message: [
			{ language: 'KO', content: '' },
			{ language: 'EN', content: '' },
			{ language: 'JA', content: '' },
		],
	});
	const [isNullValue, setIsNullValue] = useState(false);
	const [isChanged, setIsChanged] = useState(false);

	const [nullMessage, setNullMessage] = useState('필수값을 입력해주세요.');
	const [isDelete, setIsDelete] = useState(false);
	const [btnValidation, setBtnValidation] = useState(false);
	const [message_lang, setMessage_lang] = useState('KO');

	const itemId = useRef(1);

	const KOREAN_TIME = content && convertKTCDate(content.detail.send_dt);

	const KOREAN_END_TIME = content && convertKTCDate(content.detail.end_dt);

	const initialData = {
		send_dt: content && new Date(KOREAN_TIME),
		end_dt: content && new Date(KOREAN_END_TIME),
		send_hour: content && KOREAN_TIME.getHours() < 10 ? '0' + content && KOREAN_TIME.getHours() : content && KOREAN_TIME.getHours(),
		send_min: content && KOREAN_TIME.getMinutes() < 10 ? '0' + content && KOREAN_TIME.getMinutes() : content && KOREAN_TIME.getMinutes(),
		end_hour: content && KOREAN_END_TIME.getHours() < 10 ? '0' + content && KOREAN_END_TIME.getHours() : content && KOREAN_END_TIME.getHours(),
		end_min: content && KOREAN_END_TIME.getMinutes() < 10 ? '0' + content && KOREAN_END_TIME.getMinutes() : content && KOREAN_END_TIME.getMinutes(),
		message_type: content && content.detail.message_type,
		is_repeat: content && content.detail.is_repeat,
		repeat_type: content && content.detail.repeat_type,
		repeat_dt: content && content.detail.repeat_dt,
		repeat_cnt: content && content.detail.repeat_cnt,
		repeat_hour: content && content.detail.repeat_dt.substr(0, 2),
		repeat_min: content && content.detail.repeat_dt.substr(3, 2),
		game_message: content && content.game_message,
	};

	useEffect(() => {
		setSendHour('00');
		setSendMin('00');
		setEndHour('00');
		setEndMin('00');
		setRepeatHour('00');
		setRepeatMin('00');
		setResultData({
			send_dt: content && new Date(KOREAN_TIME),
			end_dt: content && new Date(KOREAN_END_TIME),
			message_type: content && content.detail.message_type,
			is_repeat: content && content.detail.is_repeat,
			repeat_type: content && content.detail.repeat_type,
			repeat_dt: content && content.detail.repeat_dt,
			repeat_cnt: content && content.detail.repeat_cnt,
			game_message: content && content.game_message,
		});

		if (content && content.game_message.length <= 1) {
			setBtnValidation(true);
		}

		if(content && content.game_message.length >= 1){
			if(content.game_message.find(message => message.language === "KO"))
				setMessage_lang("KO")
			else
				setMessage_lang(content.game_message[0].language);
		}

		(NOW_DATE > KOREAN_TIME) ? setIsPast(true) : setIsPast(false);

	}, [content]);

	const handleRepeatTime = e => {
		if (e.target.id === 'hour') setRepeatHour(e.target.value);
		else if (e.target.id === 'min') setRepeatMin(e.target.value);

		setResultData({ ...resultData, repeat_dt: (e.target.id === 'hour' ? e.target.value : repeatHour) + ':' + (e.target.id === 'min' ? e.target.value : repeatMin) + ':00' });
		setIsChanged(true);
	};

	const handleSendTime = e => {
		let sendDate = '';

		if (resultData.send_dt.length === 0 || typeof resultData.send_dt.length != 'undefined') {
			sendDate = new Date();
		} else {
			sendDate = new Date(resultData.send_dt);
		}

		if (e.target.id === 'hour') setSendHour(e.target.value);
		else if (e.target.id === 'min') setSendMin(e.target.value);

		const result = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate(), e.target.id === 'hour' ? e.target.value : sendHour, e.target.id === 'min' ? e.target.value : sendMin);

		setResultData({ ...resultData, send_dt: result });
		setIsChanged(true);
	};

	// 날짜 설정
	const handleSelectedDate = data => {
		const sendDate = new Date(data);

		if (resultData.send_dt.length === 0 || typeof resultData.send_dt.length != 'undefined') {
			setSendHour('00');
			setSendMin('00');
		}

		const resultSendData = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate(), sendHour, sendMin);

		setIsChanged(true);
		setResultData({ ...resultData, send_dt: resultSendData });
	};

	// 종료 시간 설정
	const handleEndTime = e => {
		let endDate = '';

		if (resultData.end_dt.length === 0 || typeof resultData.end_dt.length != 'undefined') {
			endDate = new Date();
		} else {
			endDate = new Date(resultData.end_dt);
		}

		if (e.target.id === 'hour') setEndHour(e.target.value);
		else if (e.target.id === 'min') setEndMin(e.target.value);

		let result = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), e.target.id === 'hour' ? e.target.value : endHour, e.target.id === 'min' ? e.target.value : endMin);

		if (resultData.send_dt > result){
			alert(t('NOTICE_DATE_CHECK'));
			result = new Date(resultData.send_dt);
		}

		setResultData({ ...resultData, end_dt: result });
		setIsChanged(true);
	};

	// 종료 날짜 설정
	const handleSelectedEndDate = data => {
		const endDate = new Date(data);

		if (resultData.end_dt.length === 0 || typeof resultData.end_dt.length != 'undefined') {
			setEndHour('00');
			setEndMin('00');
		}

		let resultEndData = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), endHour, endMin);

		if (resultData.send_dt > resultEndData){
			alert(t('NOTICE_DATE_CHECK'));
			resultEndData = new Date(resultData.send_dt);
		}

		setIsChanged(true);
		setResultData({ ...resultData, end_dt: resultEndData });
	};


	// 삭제 버튼 클릭
	const handleDelete = language => {
		let filterList = resultData.game_message.filter(el => el.language !== language);

		if (filterList.length === 1) {
			setBtnValidation(true);
			setNullMessage('');
		} else if (filterList.length > 1) {
			setBtnValidation(false);
		}

		setIsDelete(true);
		setIsChanged(true);
		setResultData({ ...resultData, game_message: filterList });
	};

	// 메세지 내용 입력 데이터
	const handleInputData = e => {
		if (e.target.value.length > 250) {
			return;
		}
		let list = [...resultData.game_message];
		let findIndex = resultData.game_message.findIndex(item => item.language === e.target.id);
		list[findIndex].content = e.target.value.trimStart();

		if (list[findIndex].content.length === 0) {
			// setIsNullValue(true);
			setNullMessage('');
		} else if (list[findIndex].content.length >= 1) {
			setIsNullValue(false);
		}

		setIsChanged(true);
		setResultData({ ...resultData, game_message: list });
	};

	// 반복횟수 입력 데이터 폼 처리
	const handleRepeatValue = e => {
		e.target.value.length === 0 ? setIsNullValue(true) : setIsNullValue(false);

		if (e.target.value === '0' || e.target.value === '-0') {
			setResultData({ ...resultData, repeat_cnt: '1' });
			e.target.value = '1';
		} else if (e.target.value < 0) {
			let plusNum = Math.abs(e.target.value);
			setResultData({ ...resultData, repeat_cnt: plusNum });
		} else {
			setResultData({ ...resultData, repeat_cnt: e.target.value });
		}

		setIsChanged(true);
	};

	// 언어 선택
	const handleLanguage = e => {
		setMessage_lang(e.target.value); 
		if(!resultData.game_message.some(({language}) => language === e.target.value))
			setResultData({ ...resultData, game_message: [...resultData.game_message, {language: e.target.value, content: ''}] })
	}

	// 수정 버튼
	const handleModifyBtn = e => {
		e.preventDefault();

		if(resultData.game_message.every(msg => msg.content === "" || msg.content === null || msg.content === undefined)){
			alert(t('NOTICE_MSG_EMPTY'))
			return;
		}

		if (isNullValue === false && isChanged === true) {
			handleModifyModal();
		} else {
			setNullMessage(t('REQUIRED_VALUE_CHECK'));
		}
	};

	const handleModifyModal = () => {
		if (modifyModal === 'hidden') {
			setModifyModal('view');
		} else {
			setModifyModal('hidden');
		}
	};

	// 완료 모달창
	const handleCompleteModal = () => {
		if (completeModal === 'hidden') {
			setCompleteModal('view');
		} else {
			setCompleteModal('hidden');

			window.location.reload();
		}
	};

	// 수정
	const handleModifyNotice = () => {
		const token = sessionStorage.getItem('token');

		NoticeModify(token, id, resultData);

		handleCompleteModal();
		handleModifyModal();

		itemId.current = 1;
	};

	// 내용 복사
	const handleCopyBtn = e => {
		e.preventDefault();
		setCopyView('view');
	};

	// 확인 버튼 닫고 올 리셋
	const handleReset = e => {
		setIsDelete(false);
		setIsNullValue(false);
		setIsChanged(false);
		setBtnValidation(false);
	};

	return (
		<>
			<Modal min="960px" $view={detailView}>
				<Title $align="center"> 인게임 메시지 정보</Title>
				{/* 등록 후 정보 확인시에만 */}
				{content && typeof content.detail.update_by !== 'undefined' && (
					<>
						<RegistInfo>
							<span>
								수정자(이메일주소) : {content && content.detail.update_name}({content && content.detail.update_by})
							</span>
							<span>수정일자 : {content && convertKTC(content.detail.update_dt, false)}</span>
						</RegistInfo>
					</>
				)}
				<MessageWrapper>
					<InputLabel>[메세지 등록 설정]</InputLabel>
					<RegistGroup>
						<InputRow>
							<InputItem>
								<InputLabel>송출 일자(예약)</InputLabel>
								<InputGroup2>
									<InputGroup>
										<DatePickerWrapper>
											<DatePickerComponent
												readOnly={viewOnly || isPast}
												selectedDate={resultData ? resultData.send_dt : initialData.send_dt}
												handleSelectedDate={data => handleSelectedDate(data)}
												pastDate={new Date()}
											/>
										</DatePickerWrapper>
										<SelectInput
											onChange={e => handleSendTime(e)}
											id="hour"
											disabled={viewOnly || isPast}
											value={
												resultData && String(new Date(resultData.send_dt).getHours()) < 10
													? '0' + String(new Date(resultData.send_dt).getHours())
													: (resultData && String(new Date(resultData.send_dt).getHours())) || ''
											}>
											{HourList.map(hour => (
												<option
													value={hour}
													key={hour}
													// selected={
													// 	resultData && String(new Date(resultData.send_dt).getHours()) < 10
													// 		? '0' + String(new Date(resultData.send_dt).getHours()) === hour
													// 		: resultData && String(new Date(resultData.send_dt).getHours()) === hour
													// 		? 'selected'
													// 		: ''
													// }
												>
													{hour}
												</option>
											))}
										</SelectInput>
										<SelectInput
											onChange={e => handleSendTime(e)}
											id="min"
											disabled={viewOnly || isPast}
											value={
												resultData && String(new Date(resultData.send_dt).getMinutes()) < 10
													? '0' + String(new Date(resultData.send_dt).getMinutes())
													: (resultData && String(new Date(resultData.send_dt).getMinutes())) || ''
											}>
											{MinuteList.map(min => (
												<option
													value={min}
													key={min}
													// selected={
													// 	resultData && String(new Date(resultData.send_dt).getMinutes()) < 10
													// 		? '0' + String(new Date(resultData.send_dt).getMinutes()) === min
													// 		: resultData && String(new Date(resultData.send_dt).getMinutes()) === min
													// 		? 'selected'
													// 		: ''
													// }
												>
													{min}
												</option>
											))}
										</SelectInput>
									</InputGroup>
									<SubText>* UTC+9 한국시간 기준으로 설정 (UTC+0 자동 반영처리)</SubText>
								</InputGroup2>
							</InputItem>
							<InputItem>
								<InputLabel>메시지 타입</InputLabel>
								<SelectInput
									disabled={viewOnly || isPast}
									onChange={e => {
										setResultData({ ...resultData, message_type: e.target.value });
										setIsChanged(true);
									}}
									value={resultData.message_type || ''}>
									<option value="CHATTING">채팅</option>
									<option value="CHATTING_TOAST">채팅 + 토스트</option>
								</SelectInput>
							</InputItem>
						</InputRow>
						<InputRow>
							{/*<CheckBox label="반복 발송" id="input-info" inline={false} checked={resultData.is_repeat} setData={e => setResultData({ ...resultData, is_repeat: e.target.checked })} />*/}
							
							{resultData.is_repeat === true && (
								<>
									<InputItem>
										<InputLabel>반복 타입</InputLabel>
										<SelectInput onChange={e => setResultData({ ...resultData, repeat_type: e.target.value })} value={resultData.repeat_type || ''}>
											<option value="COUNT">횟수</option>
											<option value="DATE">일자</option>
											<option value="TIME">특정시간</option>
										</SelectInput>
									</InputItem>
								</>
							)}
						</InputRow>
						<InputRow>
						{resultData.is_repeat === true && (
								<>
									{resultData.repeat_type !== "COUNT" && (
										<>
										<InputItem>
											<InputLabel>종료 일자</InputLabel>
											<InputGroup2>
												<InputGroup>
													<DatePickerWrapper>
														<DatePickerComponent name="종료 일자" handleSelectedDate={data => handleSelectedEndDate(data)} selectedDate={resultData.end_dt} pastDate={new Date()} />
													</DatePickerWrapper>
													<SelectInput
														onChange={e => handleEndTime(e)}
														id="hour"
														value={
															resultData && String(new Date(resultData.end_dt).getHours()) < 10
																? '0' + String(new Date(resultData.end_dt).getHours())
																: (resultData && String(new Date(resultData.end_dt).getHours())) || ''
														}>
														{HourList.map(hour => (
															<option
																value={hour}
																key={hour}
															>
																{hour}
															</option>
														))}
													</SelectInput>
													<SelectInput
														onChange={e => handleEndTime(e)}
														id="min"
														value={
															resultData && String(new Date(resultData.end_dt).getMinutes()) < 10
																? '0' + String(new Date(resultData.end_dt).getMinutes())
																: (resultData && String(new Date(resultData.end_dt).getMinutes())) || ''
														}>
														{MinuteList.map(min => (
															<option
																value={min}
																key={min}
															>
																{min}
															</option>
														))}
													</SelectInput>
												</InputGroup>
											</InputGroup2>
										</InputItem>
										</>
									)}
									
									<InputItem>
										<RepeatTime>
											{resultData.repeat_type === "TIME" && (<span>발송시간</span>)}	
											<SelectInput onChange={e => handleRepeatTime(e)} id="hour" value={resultData.repeat_dt.split(':')[0] || ''}>
												{HourList.map(hour => (
													<option
														value={hour}
														key={hour}
													>
														{hour}
													</option>
												))}
											</SelectInput>
											<SelectInput onChange={e => handleRepeatTime(e)} id="min" value={resultData.repeat_dt.split(':')[1] || ''}>
												{MinuteList.map(min => (
													<option
														value={min}
														key={min}
													>
														{min}
													</option>
												))}
											</SelectInput>
											{resultData.repeat_type !== "TIME" ? (
												<>
												<span>마다</span>
												<SubText>* 최초 송출 이후 설정된 시간 단위마다 송출</SubText>
												</>
											) : (<SubText>* 설정된 시간에만 송출</SubText>)}
										</RepeatTime>
									</InputItem>
									{resultData.repeat_type === "COUNT" && (
										<>
										<InputItem>
											<InputLabel>반복 횟수</InputLabel>
											<InputGroup>
												<TextInput
													type="number"
													value={resultData.repeat_cnt || ''}
													onChange={e => {
														handleRepeatValue(e);
													}}
													width="80px"
												/>
												<span>회</span>
											</InputGroup>
										</InputItem>
										</>
									)}
									
								</>
							)}
						</InputRow>
						{/* <InputRow>
							<CheckBox
								label="반복 발송"
								id="input-check"
								inline={false}
								checked={resultData && resultData.is_repeat}
								setData={e => {
									setResultData({ ...resultData, is_repeat: e.target.checked });
									setIsChanged(true);
								}}
								disabled={viewOnly || isPast}
							/>
							{resultData && resultData.is_repeat === true && (
								<>
									<InputItem>
										<InputLabel>종료 일자</InputLabel>
										<InputGroup2>
											<InputGroup>
												<DatePickerWrapper>
													<DatePickerComponent
														readOnly={viewOnly || isPast}
														selectedDate={resultData ? resultData.end_dt : initialData.end_dt}
														handleSelectedDate={data => handleSelectedEndDate(data)}
														pastDate={new Date()}
													/>
												</DatePickerWrapper>
												<SelectInput
													onChange={e => handleEndTime(e)}
													id="hour"
													disabled={viewOnly || isPast}
													value={
														resultData && String(new Date(resultData.end_dt).getHours()) < 10
															? '0' + String(new Date(resultData.end_dt).getHours())
															: (resultData && String(new Date(resultData.end_dt).getHours())) || ''
													}>
													{HourList.map(hour => (
														<option
															value={hour}
															key={hour}
														>
															{hour}
														</option>
													))}
												</SelectInput>
												<SelectInput
													onChange={e => handleEndTime(e)}
													id="min"
													disabled={viewOnly || isPast}
													value={
														resultData && String(new Date(resultData.end_dt).getMinutes()) < 10
															? '0' + String(new Date(resultData.end_dt).getMinutes())
															: (resultData && String(new Date(resultData.end_dt).getMinutes())) || ''
													}>
													{MinuteList.map(min => (
														<option
															value={min}
															key={min}
														>
															{min}
														</option>
													))}
												</SelectInput>
											</InputGroup>
										</InputGroup2>
									</InputItem>
									<InputItem>
										<RepeatTime>
											<SelectInput onChange={e => handleRepeatTime(e)} id="hour" disabled={viewOnly || isPast} value={resultData.repeat_dt.split(':')[0] || ''}>
												{HourList.map(hour => (
													<option
														value={hour}
														key={hour}
														// selected={resultData.repeat_dt.split(':')[0] === hour ? 'selected' : ''}
													>
														{hour}
													</option>
												))}
											</SelectInput>
											<SelectInput onChange={e => handleRepeatTime(e)} id="min" disabled={viewOnly || isPast} value={(resultData && resultData.repeat_dt.split(':')[1]) || ''}>
												{MinuteList.map(min => (
													<option
														value={min}
														key={min}
														// selected={resultData && resultData.repeat_dt.split(':')[1] === min ? 'selected' : ''}
													>
														{min}
													</option>
												))}
											</SelectInput>
											<span>마다</span>
											<SubText>* 최초 송출 이후 설정된 시간 단위마다 송출</SubText>
										</RepeatTime>
									</InputItem>
									<InputItem>
										<InputLabel>반복 횟수</InputLabel>
										<InputGroup>
											<TextInput
												type="number"
												disabled={viewOnly || isPast}
												// defaultValue={content && initialData.repeat_cnt}
												value={content ? initialData.repeat_cnt : resultData.repeat_cnt || ''}
												onChange={e => handleRepeatValue(e)}
												width="80px"
											/>
											<span>회</span>
										</InputGroup>
									</InputItem>
								</>
							)}
						</InputRow> */}
					</RegistGroup>

					<InputRow2>
					<InputLabel>
						[메세지 작성]
						<SubTextRow>* 작성하지 않은 언어는 발송되지 않습니다.</SubTextRow>
					</InputLabel>
					<InputItem2>
						<InputLabel>언어</InputLabel>
						<SelectInput onChange={e => handleLanguage(e)} value={message_lang}>
							{languageType.map((data, index) => (
								<option key={index} value={data.value}>
									{data.name}
								</option>
							))}
						</SelectInput>
					</InputItem2>
					</InputRow2>
					<BoxWrapper>
						{resultData.game_message &&
							resultData.game_message.map(content => {
								return (
									<Fragment key={content.language}>
										{message_lang === content.language && (
										<MessageBox>
											{/* <BtnWrapper $justify="flex-end">
												{btnValidation === false && resultData.game_message.length !== 1 ? (
													<ButtonClose
														onClick={e => {
															e.preventDefault();
															handleDelete(content.language);
														}}
													/>
												) : (
													<ButtonClose opacity="10%" />
												)}
											</BtnWrapper> */}
											<TitleLang>언어 : {content.language}</TitleLang>
											<div>
												<Textarea id={content.language} onChange={e => handleInputData(e)} defaultValue={content.content} maxLength={250} readOnly={viewOnly || isPast} />
											</div>
										</MessageBox>
										)}
									</Fragment>
								);
							})}
						</BoxWrapper>
					{/* {isDelete === false ? (
						<BoxWrapper>
							{content &&
								initialData.game_message.map(content => {
									return (
										<Fragment key={content.language + content.id}>
											<MessageBox>
												<BtnWrapper $justify="flex-end">
													{(btnValidation === false && updateAuth && !isPast) ? (
														<ButtonClose
															onClick={e => {
																e.preventDefault();
																handleDelete(content.language);
															}}
														/>
													) : (
														<ButtonClose opacity="10%" />
													)}
												</BtnWrapper>
												<TitleLang>언어 : {content.language}</TitleLang>
												<div>
													<Textarea readOnly={viewOnly || isPast} id={content.language} onChange={e => handleInputData(e)} defaultValue={content.content} maxLength={250} />
												</div>
											</MessageBox>
										</Fragment>
									);
								})}
						</BoxWrapper>
					) : (
						<BoxWrapper>
							{resultData.game_message &&
								resultData.game_message.map(content => {
									return (
										<Fragment key={content.language}>
											<MessageBox>
												<BtnWrapper $justify="flex-end">
													{btnValidation === false && resultData.game_message.length !== 1 ? (
														<ButtonClose
															onClick={e => {
																e.preventDefault();
																handleDelete(content.language);
															}}
														/>
													) : (
														<ButtonClose opacity="10%" />
													)}
												</BtnWrapper>
												<TitleLang>언어 : {content.language}</TitleLang>
												<div>
													<Textarea id={content.language} onChange={e => handleInputData(e)} defaultValue={content.content} maxLength={250} />
												</div>
											</MessageBox>
										</Fragment>
									);
								})}
						</BoxWrapper>
					)} */}
				</MessageWrapper>
				{isNullValue && <SearchBarAlert $marginTop="25px">{nullMessage}</SearchBarAlert>}
				<BtnWrapper $gap="10px" $justify="center" $marginTop="15px">
					<Button
						text="확인"
						name="확인버튼"
						theme="line"
						handleClick={() => {
							// window.location.reload();
							setDetailView('hidden');
							handleReset();
							itemId.current = 1;
						}}
					/>
					<>
						{updateAuth && !isPast && (
							<Button
								type="submit"
								text="수정"
								name="수정버튼"
								theme={
									isChanged === false || (resultData.game_message && resultData.game_message.every(data => data.content === '')) || isNullValue === true
										? 'disable'
										: 'primary'
								}
								handleClick={handleModifyBtn}
							/>
						)}
						<CopyBtn>
							<Button theme="line" text="내용 복사" handleClick={e => handleCopyBtn(e)} />
						</CopyBtn>
					</>
				</BtnWrapper>
			</Modal>

			{/* 확인 모달 */}
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={modifyModal}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleModifyModal} />
				</BtnWrapper>
				<ModalText $align="center">{t('UPDATE_CONFIRM')}</ModalText>
				<BtnWrapper $gap="10px">
					<Button text="취소" theme="line" size="large" width="100%" handleClick={handleModifyModal} />
					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleModifyNotice} />
				</BtnWrapper>
			</Modal>
			{/* 완료 모달 */}
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={completeModal}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleCompleteModal} />
				</BtnWrapper>
				<ModalText $align="center">{t('UPDATE_COMPLETED')}</ModalText>
				<BtnWrapper $gap="10px">
					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleCompleteModal} />
				</BtnWrapper>
			</Modal>
			{/* 내용복사 모달 */}
			<Modal $view={copyView}>
				<InGameModalText $align="center">
					현재 메시지 정보 복사 후<br />
					신규 메시지를 등록하러 이동하시겠습니까?
					<br />
					<br />
					이동 시 기존 수정 내용은 저장되지 않습니다.
				</InGameModalText>
				<BtnWrapper $justify="center" $gap="10px">
					<Button
						theme="line"
						text="취소"
						handleClick={e => {
							e.preventDefault();
							setCopyView('hidden');
						}}
					/>
					<Button
						theme="primary"
						text="확인"
						handleClick={e => {
							e.preventDefault();
							setDetailView('hidden');
							setCopyView('hidden');
							setRegistView('view');
							openRegistModal('view');
							setIsCopyData(true);
						}}
					/>
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default BoardInfoModal;

const RegistInfo = styled.div`
	display: flex;
	justify-content: flex-end;
	gap: 50px;
	font-size: 14px;
	margin-bottom: 10px;
`;

const MessageWrapper = styled.div`
	max-height: 70vh;
	overflow: auto;
	padding-bottom: 10px;
	&::-webkit-scrollbar {
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

const RegistGroup = styled.div`
	display: flex;
	width: 100%;
	flex-flow: column;
	gap: 20px;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 14px;
	margin-bottom: 20px;
`;

const InputRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
`;

const InputGroup = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
`;

const RepeatTime = styled(InputGroup)`
	width: 320px;
`;

const InputGroup2 = styled.div`
	display: flex;
	flex-flow: column;
	gap: 5px;
`;
const InputItem = styled.div`
	display: flex;
	align-items: flex-start;
	gap: 20px;
	${InputLabel} {
		line-height: 35px;
	}
	${TextInput},${SelectInput} {
		height: 35px;
		font-size: 14px;
	}
	${TextInput} {
		padding: 0 15px;
	}
	${SelectInput} {
		width: max-content;
	}
`;

const InputRow2 = styled.div`
	display: flex;
  justify-content: space-between;
  align-items: center;
`;
const InputItem2 = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
`;

const SubText = styled.div`
	width: 100%;
	color: #999;
	font-size: 12px;
`;
const SubTextRow = styled.div`
    margin-top: 5px;
	color: red;
	font-size: 12px;
`;

const BoxWrapper = styled.div`
	margin-top: 5px;
	margin-bottom: 20px;
`;

const TitleLang = styled.div`
	font-size: 14px;
	line-height: 17px;
	padding-left: 5px;
	font-weight: 600;
`;

const MessageBox = styled.div`
	background: #f9f9f9;
	padding: 20px;
	margin-bottom: 20px;
	position: relative;

	${Textarea} {
		border-radius: 3px;
		border: 1px solid #d9d9d9;
		background: #fff;
		width: 100%;
		height: 160px;
		margin-top: 10px;
	}
	${BtnWrapper} {
		position: absolute;
		width: 16px;
		height: 16px;
		top: 20px;
		right: 20px;
	}
`;

const CopyBtn = styled.div`
	position: absolute;
	right: 0;
	top: 0;
`;

const InGameModalText = styled(ModalText)`
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 20px;
`;

const ButtonClose = styled.button`
	opacity: ${props => props.opacity};
	width: 16px;
	height: 16px;
	background: url(${CloseIcon}) 50% 50% no-repeat;
`;
