import moment from 'moment';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterDateOptions } from '@/entities/common/model/types';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitFilterProps } from '@/entities/additional-service/model/link-pay/types';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';

export const LinkPaymentWaitSendFilter = ({
	filterOn,
	setFilterOn,
	mid,
	searchCl,
	searchKeyword,
	startDate,
	endDate,
	sendMethod,
	processStatus,
	setMid,
	setSearchType,
	setSearchKeyword,
	setStartDate,
	setEndDate,
	setSendMethod,
	setProcessStatus
}: LinkPaymentWaitFilterProps) => {
	const { t } = useTranslation();

	const [filterMid, setFilterMid] = useState<string>(mid);
	const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchCl>(searchCl);
	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
	const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
	const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
	const [filterProcessStatus, setFilterProcessStatus] = useState<LinkPaymentProcessStatus>(processStatus);

	const onClickToClose = () => {
		setFilterOn(false);
	};

	const onClickToSetFilter = () => {
		setMid(filterMid);
		setSearchType(filterSearchType);
		setSearchKeyword(filterSearchKeyword);
		setStartDate(filterStartDate);
		setEndDate(filterEndDate);
		setSendMethod(filterSendMethod);
		setProcessStatus(filterProcessStatus);
		onClickToClose();
	};

	let searchTypeOption = [
		{ name: t('additionalService.linkPay.phoneNumber'), value: LinkPaymentSearchCl.PHONE },
		{ name: t('common.email'), value: LinkPaymentSearchCl.EMAIL },
	];

	let sendMethodOption = [
		{ name: t('additionalService.linkPay.all'), value: LinkPaymentSendMethod.ALL },
		{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
		{ name: t('common.email'), value: LinkPaymentSendMethod.EMAIL },
		{ name: t('common.kakao'), value: LinkPaymentSendMethod.KAKAO },
	];

	let processStatusOption = [
		{ name: t('additionalService.linkPay.all'), value: LinkPaymentProcessStatus.ALL },
		{ name: t('additionalService.linkPay.sendRequest'), value: LinkPaymentProcessStatus.SEND_REQUEST },
		{ name: t('additionalService.linkPay.sendCancel'), value: LinkPaymentProcessStatus.SEND_CANCEL },
	];

	useEffect(() => {
		setFilterProcessStatus(processStatus);
	}, [processStatus]);
	return (
		<>
			<motion.div
				className="full-menu-modal"
				initial="hidden"
				animate={(filterOn) ? 'visible' : 'hidden'}
				variants={FilterMotionVariants}
				transition={FilterMotionDuration}
				style={FilterMotionStyle}
			>
				<div className="full-menu-container">
					<div className="full-menu-header">
						<div className="full-menu-title center">{t('filter.filter')}</div>
						<div className="full-menu-actions">
							<FullMenuClose
								addClass='full-menu-close'
								onClickToCallback={ onClickToClose }
							></FullMenuClose>
						</div>
					</div>

					<div className="option-list pt-16 pb-86">
						<FilterSelectMid
							title={t('filter.merchant')}
							selectSetter={setFilterMid}
							showType={'GID'}
						></FilterSelectMid>

						<FilterSelectInput
							title={t('additionalService.linkPay.phoneNumberEmail')}
							selectValue={filterSearchType}
							selectSetter={setFilterSearchType}
							selectOptions={searchTypeOption}
							inputValue={filterSearchKeyword}
							inputSetter={setFilterSearchKeyword}
						></FilterSelectInput>
						<FilterCalendar
							startDate={filterStartDate}
							endDate={filterEndDate}
							setStartDate={setFilterStartDate}
							setEndDate={setFilterEndDate}
						></FilterCalendar>

						<FilterButtonGroups
							title={t('additionalService.linkPayment.sendMethodFilter')}
							activeValue={filterSendMethod}
							btnGroups={sendMethodOption}
							setter={setFilterSendMethod}
						></FilterButtonGroups>

						<FilterButtonGroups
							title={t('additionalService.linkPayment.processStatus')}
							activeValue={filterProcessStatus}
							btnGroups={processStatusOption}
							setter={setFilterProcessStatus}
						></FilterButtonGroups>
					</div>
					<div className="apply-row">
						<button
							className="btn-50 btn-blue flex-1"
							onClick={() => onClickToSetFilter()}
						>{t('filter.apply')}</button>
					</div>
				</div>
			</motion.div>
		</>
	)
}