import { useState, Fragment, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Button from '../../common/button/Button';
import Loading from '../../common/Loading';

import {
	Title,
	BtnWrapper,
	SearchBarAlert, SelectInput, InputLabel,
} from '../../../styles/Components';

import {
	FormHelperText,
	FormInput,
	FormLabel,
	FormTextArea,
	FormTextAreaWrapper,
	MessageWrapper,
	FormRowGroup,
	NoticeInputRow2,
	NoticeInputItem2, BoxWrapper, FormStatusBar, FormStatusLabel, FormStatusWarning, FormButtonContainer,
} from '../../../styles/ModuleComponents';
import { modalTypes } from '../../../assets/data';
import {DynamicModal, Modal, DateTimeRangePicker} from '../../common';
import { LandAuctionModify, LandAuctionSingleRegist } from '../../../apis';
import {
	AUCTION_MIN_MINUTE_TIME,
	ONE_MINUTE,
	ONE_MINUTE_MS,
	TYPE_MODIFY,
	TYPE_REGISTRY,
} from '../../../assets/data/adminConstants';
import { landAuctionStatus, landAuctionStatusType, languageType, CurrencyType } from '../../../assets/data';
import { useModal } from '../../../utils/hook';
import { convertKTCDate } from '../../../utils';
import { msToMinutes } from '../../../utils/date';

const LandAuctionModal = ({ modalType, detailView, handleDetailView, content, setDetailData, landData, buildingData }) => {
	const { t } = useTranslation();
	const token = sessionStorage.getItem('token');

	const [loading, setLoading] = useState(false);		// 로딩 창
	const {
		modalState,
		handleModalView,
		handleModalClose
	} = useModal({
		cancel: 'hidden',
		registConfirm: 'hidden',
		registComplete: 'hidden'
	});
	const [message_lang, setMessage_lang] = useState('KO');

	const [isNullValue, setIsNullValue] = useState(false);		// 데이터 값 체크
	const [alertMsg, setAlertMsg] = useState('');
	const [selectLand, setSelectLand] = useState(initLandData);

	const [resultData, setResultData] = useState(initData);	//데이터 정보
	const [resetDateTime, setResetDateTime] = useState(false);

	useEffect(() => {
		if(modalType === TYPE_MODIFY && content && Object.keys(content).length > 0){
			setResultData({
				land_id: content.land_id,
				land_name: content.land_name,
				land_socket: content.land_socket,
				land_size: content.land_size,
				auction_seq: content.auction_seq,
				currency_type: content.currency_type,
				start_price: content.start_price,
				resv_start_dt: convertKTCDate(content.resv_start_dt),
				resv_end_dt: convertKTCDate(content.resv_end_dt),
				auction_start_dt: convertKTCDate(content.auction_start_dt),
				auction_end_dt: convertKTCDate(content.auction_end_dt),
				message_list: content.message_list,
			});
			const land = landData.find(land => land.id === parseInt(content.land_id));
			setSelectLand(land);
		}
	}, [modalType, content]);

	useEffect(() => {
		if (checkCondition()) {
			setIsNullValue(false);
		} else {
			setIsNullValue(true);
		}
	}, [resultData]);

	useEffect(() => {
		if (resetDateTime) {
			setResetDateTime(false);
		}
	}, [resetDateTime]);

	// 입력 수량 처리
	const handleCount = e => {
		const regex = /^\d*\.?\d{0,2}$/;
		if (!regex.test(e.target.value) && e.target.value !== '-') {
			return;
		}

		let count = 0;
		if (e.target.value === '-0') {
			count = 1;
		} else if (e.target.value < 0) {
			let plusNum = Math.abs(e.target.value);
			count = plusNum;
		} else{
			count = e.target.value;
		}
		setResultData((prevState) => ({
			...prevState,
			start_price: count,
		}));
	};

	const handleReservationChange = {
		start: (date) => {
			setResultData(prev => ({ ...prev, resv_start_dt: date }));
		},
		end: (date) => {
			setResultData(prev => ({ ...prev, resv_end_dt: date }));
		}
	};

	const handleAuctionChange = {
		start: (date) => {
			setResultData(prev => ({ ...prev, auction_start_dt: date }));
		},
		end: (date) => {
			setResultData(prev => ({ ...prev, auction_end_dt: date }));
		}
	};

	// 입력 글자 제한
	const handleInputData = e => {
		if (e.target.value.length > 250) {
			return;
		}
		const updatedMessages = resultData.message_list.map(msg =>
			msg.language === message_lang
				? { ...msg, content: e.target.value.trimStart() }
				: msg
		);

		setResultData(prev => ({
			...prev,
			message_list: updatedMessages
		}));
	};

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

	const handleLand = e => {
		const land_id = e.target.value;
		const land = landData.find(land => land.id === parseInt(land_id));
		const instance = buildingData.find(building => building.id === parseInt(land.buildingId))?.socket;
		setSelectLand(land);
		setResultData({ ...resultData, land_id: land_id, land_name: land.name, land_size: land.size, land_socket: instance });
	}

	const handleReset = () => {
		setMessage_lang('KO')
		setDetailData({});
		setSelectLand(initLandData);
		setResultData(initData);
		setResetDateTime(true);
		handleDetailView();
	}

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

				const minAllowedTime = new Date(new Date().getTime() + 5 * 60000);
				if (isView('recv') && resultData.resv_start_dt < minAllowedTime) {
					setAlertMsg(t('LAND_AUCTION_MODEL_RESV_START_WARNING'));
					return;
				}
				if (resultData.auction_start_dt < minAllowedTime) {
					setAlertMsg(t('LAND_AUCTION_MODEL_AUCTION_START_WARNING'));
					return;
				}
				if(resultData.resv_start_dt >= resultData.auction_start_dt || resultData.resv_start_dt >= resultData.auction_end_dt) {
					setAlertMsg(t('LAND_AUCTION_MODEL_AUCTION_DIFF_RESERVATION'))
					return;
				}
				if(resultData.auction_start_dt >= resultData.auction_end_dt) {
					setAlertMsg(t('LAND_AUCTION_MODEL_AUCTION_DIFF_AUCTION'))
					return;
				}
				const diffAuctionTime = resultData.auction_end_dt - resultData.auction_start_dt;
				if(msToMinutes(diffAuctionTime) < AUCTION_MIN_MINUTE_TIME){
					setAlertMsg(t('LAND_AUCTION_MODEL_MIN_TIME_WARNING'))
					return;
				}

				//화면에 머물면서 상태는 안바꼈을 경우가 있기에 경매시작시간 지났을경우 차단
				if (modalType === TYPE_MODIFY && resultData.auction_start_dt < new Date()) {
					setAlertMsg(t('LAND_AUCTION_MADEL_MODIFY_START'));
					return;
				}

				handleModalView('registConfirm');
				break;
			case "cancel":
				handleModalView('cancel');
				break;
			case "cancelConfirm":
				handleModalClose('cancel');
				handleReset();
				break;
			case "registConfirm":
				setLoading(true);

				if(isView('modify')){
					await LandAuctionModify(token, content?.id, resultData).then(data => {
						setLoading(false);
						handleModalClose('registConfirm');
						if(data.result === "SUCCESS") {
							handleModalView('registComplete');
						}else if(data.result === "ERROR_AUCTION_STATUS_IMPOSSIBLE"){
							setAlertMsg(t('LAND_AUCTION_ERROR_MODIFY_STATUS'));
						}else{
							setAlertMsg(t('UPDATE_FAIL'));
						}
					}).catch(reason => {
						setAlertMsg(t('API_FAIL'));
					});
				}
				else{
					await LandAuctionSingleRegist(token, resultData).then(data => {
						setLoading(false);
						handleModalClose('registConfirm');
						if(data.result === "SUCCESS") {
							handleModalView('registComplete');
						}else if(data.result === "ERROR_LAND_AUCTION_IMPOSSIBLE"){
							setAlertMsg(t('LAND_AUCTION_ERROR_PROGRESS'));
						}else if(data.result === "ERROR_AUCTION_LAND_OWNER"){
							setAlertMsg(t('LAND_AUCTION_ERROR_OWNER'));
						}else{
							setAlertMsg(t('REGIST_FAIL'));
						}
					}).catch(reason => {
						setAlertMsg(t('API_FAIL'));
					});
				}
				break;
			case "registComplete":
				handleModalClose('registComplete');
				handleReset();
				window.location.reload();
				break;
			case "warning":
				setAlertMsg('');
				break;
		}
	}

	const checkCondition = () => {
		return (
			resultData.start_price > 0
			&& resultData.auction_start_dt !== ''
			&& resultData.auction_end_dt !== ''
			&& resultData.resv_start_dt !== ''
			&& resultData.resv_end_dt !== ''
			&& resultData.land_id !== ''
			// && resultData.message_list?.every(data => data.content !== '')
		);
	};

	const isView = (label) => {
		switch (label) {
			case "recv":
				return modalType === TYPE_REGISTRY || (modalType === TYPE_MODIFY && content?.status === landAuctionStatusType.wait);
			case "auction":
			case "price":
			case "message":
				return modalType === TYPE_REGISTRY || (modalType === TYPE_MODIFY &&(content?.status === landAuctionStatusType.resv_start || content?.status === landAuctionStatusType.wait));
			case "modify":
				return modalType === TYPE_MODIFY && (content?.status === landAuctionStatusType.resv_start || content?.status === landAuctionStatusType.wait);
			case "registry":
				return modalType === TYPE_REGISTRY
			default:
				return modalType === TYPE_MODIFY && (content?.status === landAuctionStatusType.stl_end
					|| content?.status === landAuctionStatusType.auction_start
					|| content?.status === landAuctionStatusType.auction_end
					|| content?.status === landAuctionStatusType.fail
					|| content?.status === landAuctionStatusType.cancel
				);
		}
	}

	return (
		<>
			<Modal min="760px" $view={detailView}>
				<Title $align="center">{isView('registry') ? "랜드 경매 등록" : isView('modify') ? "랜드 경매 수정" : "랜드 경매 상세"}</Title>
				<MessageWrapper>
					<FormRowGroup>
						<FormLabel>랜드선택</FormLabel>
						<SelectInput value={resultData.land_id} onChange={e => handleLand(e)} disabled={!isView('registry')} width="400px">
							{landData && landData.map((data, index) => (
								<option key={index} value={data.id}>
									{data.name}({data.id})
								</option>
							))}
						</SelectInput>
					</FormRowGroup>
					<FormRowGroup>
						<FormLabel>랜드 이름</FormLabel>
						<FormInput
							type="text"
							disabled={true}
							width='400px'
							value={resultData?.land_name}
						/>
					</FormRowGroup>
					<FormRowGroup>
						<FormLabel>랜드 크기</FormLabel>
						<FormInput
							type="text"
							disabled={true}
							width='200px'
							value={resultData?.land_size}
						/>
						<FormLabel>인스턴스 수</FormLabel>
						<FormInput
							type="text"
							disabled={true}
							width='200px'
							value={resultData?.land_socket}
						/>
					</FormRowGroup>

					<FormRowGroup>
						<FormLabel>입찰 재화</FormLabel>
						<SelectInput value={resultData.currency_type} width='200px' disabled={true} >
							{CurrencyType.map((data, index) => (
								<option key={index} value={data.value}>
									{data.name}
								</option>
							))}
						</SelectInput>
						<FormLabel>입찰시작가</FormLabel>
						<FormInput
							type="number"
							name="price"
							value={resultData.start_price}
							step={"0.01"}
							min={0}
							width='200px'
							disabled={!isView('price')}
							onChange={e => handleCount(e)}
						/>
					</FormRowGroup>
					<DateTimeRangePicker
						label="예약기간"
						startDate={resultData.resv_start_dt}
						endDate={resultData.resv_end_dt}
						onStartDateChange={handleReservationChange.start}
						onEndDateChange={handleReservationChange.end}
						pastDate={new Date()}
						disabled={!isView('recv')}
						startLabel="시작 일자"
						endLabel="종료 일자"
						reset={resetDateTime}
						setAlert={setAlertMsg}
					/>
					<DateTimeRangePicker
						label="경매기간"
						startDate={resultData.auction_start_dt}
						endDate={resultData.auction_end_dt}
						onStartDateChange={handleAuctionChange.start}
						onEndDateChange={handleAuctionChange.end}
						pastDate={new Date()}
						disabled={!isView('auction')}
						startLabel="시작 일자"
						endLabel="종료 일자"
						reset={resetDateTime}
						setAlert={setAlertMsg}
					/>

					{/*<NoticeInputRow2>*/}
					{/*	<InputLabel>*/}
					{/*		메세지 작성[경매 시작 5분전 공지 - 미구현]*/}
					{/*	</InputLabel>*/}
					{/*	<NoticeInputItem2>*/}
					{/*		<InputLabel>언어</InputLabel>*/}
					{/*		<SelectInput onChange={e => handleLanguage(e) } value={message_lang}>*/}
					{/*			{languageType.map((data, index) => (*/}
					{/*				<option key={index} value={data.value}>*/}
					{/*					{data.name}*/}
					{/*				</option>*/}
					{/*			))}*/}
					{/*		</SelectInput>*/}
					{/*	</NoticeInputItem2>*/}
					{/*</NoticeInputRow2>*/}
					{/*<BoxWrapper>*/}
					{/*	{resultData.message_list.map(content => {*/}
					{/*		return (*/}
					{/*			<Fragment key={content.language}>*/}
					{/*				{message_lang === content.language && (*/}
					{/*					<FormTextAreaWrapper>*/}
					{/*						<FormTextArea*/}
					{/*							name="content"*/}
					{/*							id={content.language}*/}
					{/*							value={content.content}*/}
					{/*							onChange={e => handleInputData(e)}*/}
					{/*							maxLength={250}*/}
					{/*							disabled={!isView('message')}*/}
					{/*						/>*/}
					{/*					</FormTextAreaWrapper>*/}
					{/*				)}*/}
					{/*			</Fragment>*/}
					{/*		);*/}
					{/*	})}*/}
					{/*</BoxWrapper>*/}
				{!isView() && isNullValue && <SearchBarAlert $marginTop="25px" $align="right">{t('REQUIRED_VALUE_CHECK')}</SearchBarAlert>}
				</MessageWrapper>

				<BtnWrapper $gap="10px" $marginTop="10px">
					<FormStatusBar>
						<FormStatusLabel>
							현재상태: {landAuctionStatus.find(data => data.value === content?.status)?.name || "등록"}
						</FormStatusLabel>
						<FormStatusWarning>
							{isView('registry') ? '' : t('LAND_AUCTION_MODAL_STATUS_WARNING')}
						</FormStatusWarning>
					</FormStatusBar>
					<FormButtonContainer $gap="5px">
					{isView() ?
						<Button
							text="확인"
							name="확인버튼"
							theme="line"
							handleClick={() => handleReset()}
						/>
						:
						<>
							<Button text="취소" theme="line" handleClick={() => handleSubmit('cancel')} />
							<Button
								type="submit"
								text={isView('modify') ? "수정" : "등록"}
								name="등록버튼"
								theme={
									checkCondition()
										? 'primary'
										: 'disable'
								}
								handleClick={() => handleSubmit('submit')}
							/>
						</>
					}
					</FormButtonContainer>
				</BtnWrapper>
			</Modal>

			{/* 확인 모달 */}
			<DynamicModal
				modalType={modalTypes.confirmOkCancel}
				view={modalState.registConfirmModal}
				modalText={isView('modify') ? t('LAND_UPDATE_CONFIRM') : t('LAND_REGIST_CONFIRM')}
				handleSubmit={() => handleSubmit('registConfirm')}
				handleCancel={() => handleModalClose('registConfirm')}
			/>
			{/* 완료 모달 */}
			<DynamicModal
				modalType={modalTypes.completed}
				view={modalState.registCompleteModal}
				modalText={isView('modify') ? t('UPDATE_COMPLETED') : t('REGIST_COMPLTE')}
				handleSubmit={() => handleSubmit('registComplete')}
			/>
			{/* 취소 모달 */}
			<DynamicModal
				modalType={modalTypes.confirmOkCancel}
				view={modalState.cancelModal}
				modalText={t('CANCEL_CONFIRM')}
				handleCancel={() => handleModalClose('cancel')}
				handleSubmit={() => handleSubmit('cancelConfirm')}
			/>
			{/* 경고 모달 */}
			<DynamicModal
				modalType={modalTypes.completed}
				view={alertMsg ? 'view' : 'hidden'}
				modalText={alertMsg}
				handleSubmit={() => handleSubmit('warning')}
			/>
			{loading && <Loading/>}
		</>
	);
};

export const initData = {
	land_id: '',
	land_name: '',
	land_size: '',
	land_socket: '',
	currency_type: 'Calium',
	start_price: 0,
	resv_start_dt: '',
	resv_end_dt: '',
	auction_start_dt: '',
	auction_end_dt: '',
	message_list: [
		{ language: 'KO', content: '' },
		{ language: 'EN', content: '' },
		{ language: 'JA', content: '' },
	],
}

export const initLandData = {
	land_id: 0,
	name: '',
	size: '',
	socket: '',
	desc: '',
	open: false,
	owner: ''
}

export default LandAuctionModal;

