import { styled } from 'styled-components';
import RadioInput from '../../common/input/Radio';
import React, { useState, useEffect, Fragment } from 'react';
import CheckBox from '../../common/input/CheckBox';

import { Title, SelectInput, BtnWrapper, TextInput, Label, InputLabel, DatePickerWrapper, Textarea} from '../../../styles/Components';
import Button from '../../common/button/Button';
import Modal from '../../common/modal/Modal';

import IconDelete from '../../../assets/img/icon/icon-delete.png';
import CloseIcon from '../../../assets/img/icon/icon-close.png';
import DatePickerComponent from '../../common/Date/DatePickerComponent';
import MailRegistUploadBtn from '../MailRegistUploadBtn';
import {
	authType,
	benItems, commonStatus,
	HourList,
	mailType,
	MinuteList,
	userType,
	currencyType,
} from '../../../assets/data';
import { MailCaliumTotalView, MailIsItem, MailModify } from '../../../apis';

import { authList } from '../../../store/authList';
import { useRecoilValue } from 'recoil';
import { convertKTC, convertKTCDate } from '../../../utils';
import { useNavigate } from 'react-router-dom';
import { useDataFetch } from '../../../hooks/hook';
import { useAlert } from '../../../context/AlertProvider';
import { useLoading } from '../../../context/LoadingProvider';
import { alertTypes, currencyCodeTypes } from '../../../assets/data/types';
import { userType2 } from '../../../assets/data/options';

const MailDetailModal = ({ detailView, handleDetailView, content }) => {
	const userInfo = useRecoilValue(authList);
	const token = sessionStorage.getItem('token');
	const navigate = useNavigate();
	const {showModal, showToast} = useAlert();
	const {withLoading} = useLoading();

	const id = content && content.id;
	const updateAuth = userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === authType.mailUpdate);

	const [sendHour, setSendHour] = useState('00');
	const [sendMin, setSendMin] = useState('00');

	const [item, setItem] = useState('');
	const [itemCount, setItemCount] = useState('');
	const [resource, setResource] = useState(currencyCodeTypes.gold);
	const [resourceCount, setResourceCount] = useState('');

	const [resultData, setResultData] = useState({
		is_reserve: false,
		send_dt: '',
		mail_type: 'SELECT',
		receive_type: 'SINGLE',
		user_type: 'GUID',
		mail_list: [],
		item_list: [],
		guid: '',
	});

	// 과거 판단
	const [isView, setIsView] = useState(true);
	const [isChanged, setIsChanged] = useState(false);

	const [excelFile, setExcelFile] = useState('');
	const [downloadData, setDownLoadData] = useState(null);

	const [btnValidation, setBtnValidation] = useState(false);

	const {
		data: caliumTotalData,
	} = useDataFetch(() => MailCaliumTotalView(token), [token]);

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

	const initialData = {
		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(),
		send_status: content && content.send_status,
	};

	useEffect(() => {
		if(content) {
			setResultData({
				...resultData,
				is_reserve: content.is_reserve,
				send_dt: KOREAN_TIME,
				mail_type: content.mail_type,
				receive_type: content.receive_type,
				mail_list: content.mail_list,
				item_list: content.item_list,
				guid: content.target,
				file_name: content.receive_type === 'MULTIPLE' ? content.target : null
			});

			content.mail_list.length === 1 && setBtnValidation(true);
			content.is_reserve === false && setBtnValidation(true);

			setItem('');
			if (content.receive_type === 'MULTIPLE') {
				setDownLoadData(content.target);
				setExcelFile(content.target);
			}
		}
	}, [content]);

	useEffect(() => {
		if(content){
			if(!updateAuth
				|| !content.is_reserve
				|| (content.is_reserve && convertKTCDate(content.send_dt) < new Date)
				|| (content.send_status === commonStatus.fail || content.send_status === commonStatus.finish)
			){
				setIsView(true);
			}else{
				setIsView(false);
			}
		}
	},[updateAuth, content, resultData])

	// 아이템 수량 숫자 체크
	const handleItemCount = e => {
		if (e.target.value === '0' || e.target.value === '-0') {
			setItemCount('1');
			e.target.value = '1';
		} else if (e.target.value < 0) {
			let plusNum = Math.abs(e.target.value);
			setItemCount(plusNum);
		} else {
			setItemCount(e.target.value);
		}
	};

	// 아이템 추가
	const handleItemList = async () => {
		if(benItems.includes(item)){
			showToast('MAIL_ITEM_ADD_BEN',{type: alertTypes.warning});
			return;
		}
		if(item.length === 0 || itemCount.length === 0 || itemCount <= 0){
			showToast('COUNT_EMPTY_WARNING', { type: alertTypes.warning });
			return;
		}

		await withLoading(async () => {
			return await MailIsItem(token, { item: item });
		}).then(data => {
			if (data.result === 'ERROR') {
				showToast(data.data.message, { type: alertTypes.warning });
			}else{
				const itemIndex = resultData.item_list.findIndex(
					data => data.item === item
				);

				if (itemIndex !== -1) {
					showToast('MAIL_ITEM_ADD_DUPL', { type: alertTypes.warning });
					return;
				}
				const newItem = { item: item, item_cnt: itemCount, item_name: data.data.item_info.item_name };

				resultData.item_list.push(newItem);

				setIsChanged(true);
				setItem('');
				setItemCount('');
			}
		}).catch(e => {
			showToast(e, { type: alertTypes.error });
		});
	};

	// 아이템 삭제
	const onItemRemove = id => {
		let filterList = resultData.item_list && resultData.item_list.filter(item => item !== resultData.item_list[id]);
		setIsChanged(true);

		setResultData({ ...resultData, item_list: filterList });
	};

	// 자원 수량 숫자 체크
	const handleResourceCount = e => {
		if (e.target.value === '0' || e.target.value === '-0') {
			setResourceCount('1');
			e.target.value = '1';
		} else if (e.target.value < 0) {
			let plusNum = Math.abs(e.target.value);
			setResourceCount(plusNum);
		} else {
			setResourceCount(e.target.value);
		}
	};

	// 자원 추가
	const handleResourceList = () => {
		if (resourceCount.length === 0 || resourceCount <= 0) {
			showToast('COUNT_EMPTY_WARNING', { type: alertTypes.warning });
		} else {
			const itemIndex = resultData.item_list.findIndex(
				(item) => item.item === resource,
			);

			if (itemIndex !== -1) {
				const item_cnt = resultData.item_list[itemIndex].item_cnt;
				if (resource === currencyCodeTypes.calium) {
					if ((Number(resourceCount) + Number(item_cnt)) > caliumTotalData) {
						showToast('MAIL_ITEM_CALIUM_TOTAL_OVER_WARNING', { type: alertTypes.warning });
						return;
					}
				}
				resultData.item_list[itemIndex].item_cnt = Number(item_cnt) + Number(resourceCount);
			} else {
				if (resource === currencyCodeTypes.calium) {
					if (Number(resourceCount) > caliumTotalData) {
						showToast('MAIL_ITEM_CALIUM_TOTAL_OVER_WARNING', { type: alertTypes.warning });
						return;
					}
				}
				const name = currencyType.find(well => well.value === resource).name;
				const newItem = { item: resource, item_cnt: resourceCount, item_name: name };
				resultData.item_list.push(newItem);
			}
			setIsChanged(true);

			setResourceCount('');
		}
	};

	// 입력창 삭제
	const onLangDelete = language => {
		let filterList = resultData.mail_list && resultData.mail_list.filter(el => el.language !== language);

		if (filterList.length === 1) setBtnValidation(true);

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

	// 발송 날짜 세팅 로직
	const handleSelectedDate = data => {
		const sendDate = new Date(data);

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

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

	// 발송 시간 세팅 로직
	const handleSendTime = e => {
		if (e.target.id === 'hour') setSendHour(e.target.value);
		else if (e.target.id === 'min') setSendMin(e.target.value);

		const sendDate = new Date(resultData.send_dt);
		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);

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

	// 확인 버튼 후 다 초기화
	const handleReset = () => {
		setItem('');
		setItemCount('');
		setResource(currencyCodeTypes.gold);
		setResourceCount('');
		setBtnValidation(false);
		setIsChanged(false);
		setExcelFile(null);
	};

	//내용복사
	const handleCopyContent = () => {
		const mailData = {
			is_reserve: resultData.is_reserve,
			mail_type: resultData.mail_type,
			mail_list: resultData.mail_list,
			item_list: resultData.item_list,
			resource_list: resultData.resource_list,
			receive_type: resultData.receive_type,
			user_type: resultData.user_type,
			guid: resultData.guid
		};

		// 복사한 데이터를 세션 스토리지에 저장
		sessionStorage.setItem('copyMailData', JSON.stringify(mailData));

		navigate('/servicemanage/mail/mailregist');
	};

	const checkCondition = () => {
		return (
			content &&
			resultData?.mail_list?.every(data => data.content !== '' && data.title !== '')
			&& ((resultData.is_reserve === true && resultData.send_dt !== '') || resultData.is_reserve === false)
			&& (resultData.receive_type === 'MULTIPLE' ? excelFile !== null : resultData.guid !== '')
			&& resultData.mail_type !== 'SELECT'
			&& isChanged
		);
	};

	const handleSubmit = async (type, param = null) => {
		switch (type) {
			case "submit":
				if (!checkCondition()) return;

				showModal('MAIL_UPDATE_SAVE', {
					type: alertTypes.confirm,
					onConfirm: () => handleSubmit('updateConfirm')
				})
				break;
			case "updateConfirm":
				await withLoading(async () => {
					if(resultData.receive_type === 'MULTIPLE') {
						delete resultData.guid

						return await MailModify(token, id, resultData);
					} else {
						return await MailModify(token, id, resultData);
					}
				}).then(data => {
					if(data.result === 'SUCCESS') {
						showToast('UPDATE_COMPLETED', {type: alertTypes.success});
						handleDetailView();
						handleReset();
					}else{
						showToast(data.data.message, {type: alertTypes.error});
					}
				}).catch(error => {
					showToast('API_FAIL', {type: alertTypes.error});
				}).finally(() => {

				});
				break;
		}
	}

	return (
		<>
			<Modal min="960px" $view={detailView}>
				<Title $align="center">우편 상세 정보</Title>
				{content && <>
				<RegistInfo>
					<span>등록자 : {content.create_by}</span>
					<span>등록일 : {convertKTC(content.create_dt, false)}</span>
					{typeof content.update_by !== 'undefined' && (
						<>
							<span>수정자 : {content.update_by}</span>
							<span>수정일 : {convertKTC(content.update_dt, false)}</span>
						</>
					)}
				</RegistInfo>
				<ModalWrapper>
					<RegistGroup>
						<InputRow>
							<CheckBox
								label="예약 발송"
								id="reserve"
								checked={resultData && resultData.is_reserve}
								setData={e => {
									setResultData({ ...resultData, is_reserve: e.target.checked });
									setIsChanged(true);
								}}
								disabled={(content.is_reserve === false) || isView}
							/>
							{content.is_reserve === false ? (
								<></>
							) : (
								resultData.is_reserve === true && (
									<InputItem>
										<InputLabel>발송 시간</InputLabel>
										<InputGroup>
											<DatePickerWrapper>
												<DatePickerComponent
													readOnly={(content.is_reserve === false) || isView}
													name={initialData.send_dt}
													selectedDate={resultData ? resultData.send_dt : initialData.send_dt}
													handleSelectedDate={data => handleSelectedDate(data)}
													pastDate={new Date()}
												/>
											</DatePickerWrapper>
											<SelectInput
												onChange={e => handleSendTime(e)}
												id="hour"
												disabled={(content.is_reserve === false) || isView}
												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}>
														{hour}
													</option>
												))}
											</SelectInput>
											<SelectInput
												onChange={e => {
													handleSendTime(e);
													setIsChanged(true);
												}}
												id="min"
												disabled={(content.is_reserve === false) || isView}
												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}>
														{min}
													</option>
												))}
											</SelectInput>
										</InputGroup>
									</InputItem>
								)
							)}
							<InputItem>
								<InputLabel>우편 타입</InputLabel>
								<SelectInput
									onChange={e => {
										setResultData({ ...resultData, mail_type: e.target.value });
										setIsChanged(true);
									}}
									value={resultData.mail_type}
									disabled={isView}>
									<option value="SELECT">타입 선택</option>
									{mailType.filter(data => data.value !== 'ALL').map((data, index) => (
										<option key={index} value={data.value}>
											{data.name}
										</option>
									))}
								</SelectInput>
							</InputItem>
							<InputItem>
								<InputLabel>발송상태</InputLabel>
								<div>
									{initialData.send_status === 'WAIT' && <MailState>대기</MailState>}
									{initialData.send_status === 'FINISH' && <MailState result="success">완료</MailState>}
									{initialData.send_status === 'FAIL' && <MailState result="fail">실패</MailState>}
								</div>
							</InputItem>
						</InputRow>
						<MailReceiver>
							<InputItem>
								<InputLabel>수신대상</InputLabel>
								<InputItem>
									<SelectInput onChange={e => setResultData({ ...resultData, user_type: e.target.value })}
												 value={resultData.user_type}
												 disabled={true}>
										{userType2.map((data, index) => (
											<option key={index} value={data.value}>
												{data.name}
											</option>
										))}
									</SelectInput>
								</InputItem>
								<div>
									<InputGroup>
										<RadioInput
											label="단일"
											id="SINGLE"
											name="receiver"
											value="SINGLE"
											disabled={true}
											fontWeight="600"
											checked={resultData.receive_type === 'SINGLE'}
										/>
										<TextInput
											disabled={true}
											value={resultData.receive_type === 'SINGLE' && resultData.guid !== '' ? resultData.guid : ''}
										/>
									</InputGroup>
									<InputGroup>
										<RadioInput
											label="복수"
											id="MULTIPLE"
											name="receiver"
											value="MULTIPLE"
											fontWeight="600"
											disabled={true}
										/>
										<MailRegistUploadBtn
											disabled={true}
											setResultData={setResultData}
											resultData={resultData}
											setExcelFile={setExcelFile}
											handleDetailDelete={() => {}}
											disabledBtn={true}
											excelName={excelFile}
											setExcelName={setExcelFile}
											downloadData={downloadData}
											status={initialData.send_status}
										/>
									</InputGroup>
								</div>
							</InputItem>
						</MailReceiver>
					</RegistGroup>
					{resultData.mail_list &&
						resultData?.mail_list?.map(data => {
							return (
								<Fragment key={data.language}>
									<MailRegistBox>
										<LangArea>
											언어 : {data.language}
											{btnValidation === false ? (
												<BtnClose
													disabled={true}
													onClick={e => {
														e.preventDefault();
														onLangDelete(data.language);
													}}
												/>
											) : (
												<BtnClose opacity="10%" />
											)}
										</LangArea>
										<MailRegistTable>
											<tbody>
												<tr>
													<th width="120">
														<Label>제목</Label>
													</th>
													<td>
														<InputItem>
															<TextInput
																placeholder="우편 제목 입력"
																maxLength="30"
																id={data.language}
																value={data.title}
																readOnly={(content.is_reserve === false) || isView}
																onChange={e => {
																	let list = [...resultData.mail_list];
																	let findIndex = resultData.mail_list && resultData.mail_list.findIndex(item => item.language === e.target.id);
																	list[findIndex].title = e.target.value.trimStart();

																	setResultData({ ...resultData, mail_list: list });
																	setIsChanged(true);
																}}
															/>
														</InputItem>
													</td>
												</tr>
												<tr>
													<th>
														<Label>내용</Label>
													</th>
													<td>
														<Textarea
															value={data.content}
															readOnly={isView}
															id={data.language}
															onChange={e => {
																if (e.target.value.length > 2000) {
																	return;
																}
																let list = [...resultData.mail_list];
																let findIndex = resultData.mail_list && resultData.mail_list.findIndex(item => item.language === e.target.id);
																list[findIndex].content = e.target.value.trimStart();

																setResultData({ ...resultData, mail_list: list });
																setIsChanged(true);
															}}
														/>
													</td>
												</tr>
											</tbody>
										</MailRegistTable>
									</MailRegistBox>
								</Fragment>
							);
						})}
					<MailRegistBox>
						<MailRegistTable>
							<tbody>
								<tr>
									<th width="120">
										<Label>아이템 첨부</Label>
									</th>
									<td>
										<InputItem>
											<TextInput
												placeholder="Item Meta id 입력"
												value={item}
												onChange={e => {
													let list = [];
													list = e.target.value.trimStart();
													setItem(list);
												}}
												disabled={isView}
											/>
											<TextInput
												placeholder="수량"
												value={itemCount}
												type="number"
												onChange={e => handleItemCount(e)}
												width="90px"
												disabled={isView}
											/>
											<Button
												text="추가"
												theme={itemCount.length === 0 || item.length === 0 ? 'disable' : 'search'}
												disabled={isView}
												handleClick={handleItemList}
											/>
										</InputItem>
									</td>
								</tr>
								<tr>
									<th width="120">
										<Label>자원 첨부</Label>
									</th>
									<td>
										<InputItem>
											<SelectInput onChange={e => setResource(e.target.value)} value={resource} disabled={isView}>
												{currencyType.map((data, index) => (
													<option key={index} value={data.value}>
														{data.name}
													</option>
												))}
											</SelectInput>
											<TextInput
												placeholder="수량"
												type="number"
												value={resourceCount}
												disabled={isView}
												onChange={e => handleResourceCount(e)}
												width="200px"
											/>
											<Button
												text="추가"
												theme={resourceCount.length === 0 || resource.length === 0 ? 'disable' : 'search'}
												disabled={isView}
												handleClick={handleResourceList}
												width="100px"
												height="35px"
											/>
											{resource === currencyCodeTypes.calium &&
												<Label>(잔여 수량: {caliumTotalData})</Label>}
										</InputItem>

										<div>
											{resultData.item_list && (
												<ItemList>
													{resultData.item_list.map((data, index) => {
														return (
															<Item key={index}>
																<span>
																	{data.item_name}[{data.item}] ({data.item_cnt})
																</span>
																{!isView && <BtnDelete onClick={() => onItemRemove(index)}></BtnDelete>}
															</Item>
														);
													})}
												</ItemList>
											)}
										</div>
									</td>
								</tr>
							</tbody>
						</MailRegistTable>
					</MailRegistBox>
				</ModalWrapper>
				</>}
				<BtnWrapper $justify="flex-end" $gap="10px" $paddingTop="20px">
					<Button
						text="확인"
						theme="line"
						name="확인버튼"
						handleClick={() => {
							handleDetailView();
							handleReset();
						}}
					/>
					{!isView && (
						<Button
							type="submit"
							text="수정"
							id="수정버튼"
							theme={checkCondition() ? 'primary' : 'disable'}
							handleClick={() => {
								// handleModifyModal();
								handleSubmit('submit')
							}}
						/>
					)}
					<Button theme="line" text="내용 복사" handleClick={handleCopyContent}  />
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default MailDetailModal;

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

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

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

const BtnClose = styled.button`
	width: 16px;
	height: 16px;
	background: url(${CloseIcon}) 50% 50% no-repeat;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 20px;
	opacity: ${props => props.opacity};
`;

const LangArea = styled.div`
	background: #f9f9f9;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	position: relative;
`;

const MailRegistBox = styled.div`
	margin-bottom: 20px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
`;

const MailRegistTable = styled.table`
	th,
	td {
		padding: 15px 0;
	}
	td {
		${TextInput} {
			max-width: 600px;
		}
		${Textarea} {
			width: 100%;
			border: 1px solid #d9d9d9;
			border-radius: 5px;
			height: 150px;
			padding: 15px;
			&:focus {
				border: 1px solid #2c2c2c;
			}
		}
	}
`;

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: 40px;
`;

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

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

const MailReceiver = styled.div`
	display: flex;
	align-items: flex-start;
	${InputItem} {
		align-items: flex-start;
	}
	${InputLabel} {
		line-height: 35px;
	}
	${TextInput} {
		margin-left: 20px;
		width: 400px;
	}
	${InputGroup} {
		margin-bottom: 5px;
	}
`;

const MailState = styled.span`
	font-weight: 600;
	color: ${props => (props.result === 'success' ? '#08994B' : props.result === 'fail' ? '#ff0000' : '#2c2c2c')};
`;

const ItemList = styled.ul`
	display: flex;
	gap: 20px;
	padding: 10px 20px;
	flex-wrap: wrap;
`;

const Item = styled.li`
	display: flex;
	gap: 5px;
	align-items: center;
`;

const BtnDelete = styled.button`
	width: 12px;
	height: 12px;
	background: url(${IconDelete}) 50% 50% no-repeat;
`;