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 {
    AccountHolderSearchType,
    AccountHolderSearchFilterProps,
    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';

export const AccountHolderSearchFilter = ({
    filterOn,
    setFilterOn,
    mid,
    searchType,
    searchKeyword,
    startDate,
    endDate,
    bank,
    processResult,
    setMid,
    setSearchType,
    setSearchKeyword,
    setStartDate,
    setEndDate,
    setBank,
    setProcessResult
}: AccountHolderSearchFilterProps) => {

    const [filterMid, setFilterMid] = useState<string>(mid);
    const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
    const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
    const [filterBank, setFilterBank] = useState<string>(bank)
    const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
    const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
    const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);

    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);

    const variants = {
        hidden: { x: '100%' },
        visible: { x: '0%' },
    };

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

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

    const onClickToSetFilter = () => {
        setMid(filterMid);
        setSearchType(filterSearchType);
        setSearchKeyword(filterSearchKeyword);
        setStartDate(filterStartDate);
        setEndDate(filterEndDate);
        setBank(filterBank);
        setProcessResult(filterProcessResult);
    };

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

    let bankOptions = [
        { name: '우리은행', value: '우리은행'},
        { name: '토스뱅킹', value: '토스뱅킹'}
    ]

    let searchTypeOption = [
        { name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER },
        { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER },
    ]

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

    return (
        <>
            <motion.div
                id="fullMenuModal"
                className="full-menu-modal"
                initial="hidden"
                animate={(filterOn) ? 'visible' : 'hidden'}
                variants={variants}
                transition={{ duration: 0.3 }}
                style={{
                    width: '100%',
                    height: '100%',
                }}
            >
                <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={mid}
                            selectSetter={setMid}
                            selectOptions={MidOptions}
                        ></FilterSelect>

                        <FilterSelectInput
                            title='예금주/계좌번호'
                            selectValue={searchType}
                            selectSetter={setSearchType}
                            selectOptions={searchTypeOption}
                            inputValue={searchKeyword}
                            inputSetter={setSearchKeyword}
                        ></FilterSelectInput>
                        <FilterCalendar
                            startDate={filterStartDate}
                            endDate={filterEndDate}
                            setStartDate={setFilterStartDate}
                            setEndDate={setFilterEndDate}
                        ></FilterCalendar>

                        <FilterSelect
                            title='은행'
                            selectValue={bank}
                            selectSetter={setBank}
                            selectOptions={bankOptions}
                        ></FilterSelect>

                        <FilterButtonGroups
                            title='조회결과'
                            activeValue={filterProcessResult}
                            btnGroups={processResultBtnGroup}
                            setter={setFilterProcessResult}
                        ></FilterButtonGroups>
                    </div>
                    <div className="apply-row">
                        <button
                            className="btn-50 btn-blue flex-1"
                            onClick={() => onClickToSetFilter()}
                        >적용</button>
                    </div>
                </div>
            </motion.div>
        </>
    )

}