import moment from 'moment';
import { useEffect } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import {
	LinkPaymentSearchType,
	LinkPaymentSendMethod,
	LinkPaymentHistoryFilterProps,
	LinkPaymentTransactionStatus,
	ProcessResult
} from "../../../model/types";
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';

export const LinkPaymentHistoryFilter = ({
	filterOn,
	setFilterOn,
	mid,
	searchType,
	searchKeyword,
	startDate,
	endDate,
	transactionStatus,
	processResult,
	sendMethod,
	setMid,
	setSearchType,
	setSearchKeyword,
	setStartDate,
	setEndDate,
	setTransactionStatus,
	setProcessResult,
	setSendMethod
}: LinkPaymentHistoryFilterProps) => {


	const [filterMid, setFilterMid] = useState<string>(mid);
	const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
	const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
	const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
	const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
	const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
	const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
	const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);

	const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
	
	const onClickToClose = () => {
		setFilterOn(false);
	};

	const setNewDate = (newDate: any) => {
		console.log(newDate)
	};

	const onClickToSetFilter = () => {
		setMid(filterMid);
		setSearchType(filterSearchType);
		setSearchKeyword(filterSearchKeyword);
		setStartDate(filterStartDate);
		setEndDate(filterEndDate);
		setTransactionStatus(filterTransactionStatus);
		setProcessResult(filterProcessResult);
		setSendMethod(filterSendMethod);
		onClickToClose();
	};

	let MidOptions = [
		{ name: 'nictest001m', value: 'nictest001m' },
		{ name: 'nictest002m', value: 'nictest002m' }
	];

	let searchTypeOption = [
		{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
		{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
	];

	let transactionStatusOption = [
		{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
		{ name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
		{ name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
		{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
		{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
		{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
	];

	let processResultOption = [
		{ name: '전체', value: ProcessResult.ALL },
		{ name: '성공', value: ProcessResult.SUCCESS },
		{ name: '실패', value: ProcessResult.FAIL },
	];

	let sendMethodOption = [
		{ name: '전체', value: LinkPaymentSendMethod.ALL },
		{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
		{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
		{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
	];

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

					<div className="option-list pt-16">
						<FilterSelect
							title='가맹점'
							selectValue={filterMid}
							selectSetter={setFilterMid}
							selectOptions={MidOptions}
						></FilterSelect>

						<FilterSelectInput
							title='휴대폰번호/이메일'
							selectValue={filterSearchType}
							selectSetter={setFilterSearchType}
							selectOptions={searchTypeOption}
							inputValue={searchKeyword}
							inputSetter={setSearchKeyword}
						></FilterSelectInput>
						<FilterCalendar
							startDate={filterStartDate}
							endDate={filterEndDate}
							setStartDate={setFilterStartDate}
							setEndDate={setFilterEndDate}
						></FilterCalendar>

						<FilterButtonGroups
							title='거래상태'
							activeValue={filterTransactionStatus}
							btnGroups={transactionStatusOption}
							setter={setFilterTransactionStatus}
						></FilterButtonGroups>

						<FilterButtonGroups
							title='전송결과'
							activeValue={filterProcessResult}
							btnGroups={processResultOption}
							setter={setFilterProcessResult}
						></FilterButtonGroups>

						<FilterButtonGroups
							title='발송수단'
							activeValue={filterSendMethod}
							btnGroups={sendMethodOption}
							setter={setFilterSendMethod}
						></FilterButtonGroups>
					</div>
					<div className="apply-row">
						<button
							className="btn-50 btn-blue flex-1"
							onClick={() => onClickToSetFilter()}
						>적용</button>
					</div>
				</div>
			</motion.div>
		</>
	)
}