import moment from 'moment';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterInput } from '@/shared/ui/filter/input';
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 { FaceAuthFilterProps, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
import { getAuthResultBtnGroup, getTransactionTypeBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
import { useTranslation } from 'react-i18next';

export const FaceAuthFilter = ({
	filterOn,
	setFilterOn,
	mid,
	userMallId,
	fromDate,
	toDate,
	transType,
	authResult,
	setMid,
	setUserMallId,
	setFromDate,
	setToDate,
	setTransType,
	setAuthResult
}: FaceAuthFilterProps) => {
	const { t } = useTranslation();

	const [filterMid, setFilterMid] = useState<string>(mid);
	const [filterMemberId, setFilterMemberId] = useState<string>(userMallId);
	const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
	const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
	const [filterTransType, setFIlterTransType] = useState<FaceAuthTransType>(transType);
	const [filterAuthResult, setFilterAuthResult] = useState<FaceAuthResult>(authResult);

	useEffect(() => {
		setFilterAuthResult(authResult);
	}, [authResult]);

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

	const onClickToSetFilter = () => {
		setMid(filterMid);
		setUserMallId(filterMemberId);
		setFromDate(filterFromDate);
		setToDate(filterToDate);
		setTransType(filterTransType);
		setAuthResult(filterAuthResult);
		onClickToClose();
	};

	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">
							<button
								id="closeFullMenu"
								className="full-menu-close"
							>
								<img
									src={IMAGE_ROOT + '/ico_close.svg'}
									alt={t('filter.close')}
									onClick={() => onClickToClose()}
								/>
							</button>
						</div>
					</div>

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

						<FilterInput
							title={t('additionalService.faceAuth.merchantMemberId')}
							inputValue={filterMemberId}
							inputSetter={setFilterMemberId}
						></FilterInput>

						<FilterCalendar
							startDate={filterFromDate}
							endDate={filterToDate}
							setStartDate={setFilterFromDate}
							setEndDate={setFilterToDate}
						></FilterCalendar>

						<FilterButtonGroups
							title={t('additionalService.faceAuth.transactionType')}
							activeValue={filterTransType}
							btnGroups={getTransactionTypeBtnGroup(t)}
							setter={setFIlterTransType}
						></FilterButtonGroups>

						<FilterButtonGroups
							title={t('additionalService.faceAuth.authenticationResult')}
							activeValue={filterAuthResult}
							btnGroups={getAuthResultBtnGroup(t)}
							setter={setFilterAuthResult}
						></FilterButtonGroups>
					</div>
					<div className="apply-row">
						<button
							className="btn-50 btn-blue flex-1"
							onClick={() => onClickToSetFilter()}
						>{t('filter.apply')}</button>
					</div>
				</div>
			</motion.div>
		</>
	);
}
