import moment from 'moment';
import { useEffect } from 'react';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
    KeyInPaymentFilterProps,
    KeyInPaymentTransactionStatus
} from '../../model/types';

export const KeyInPaymentFilter = ({
    filterOn,
    setFilterOn,
    mid,
    startDate,
    endDate,
    transactionStatus,
    minAmount,
    maxAmount,
    setMid,
    setStartDate,
    setEndDate,
    setTransactionStatus,
    setMinAmount,
    setMaxAmount
}: KeyInPaymentFilterProps) => {

    const [filterMid, setFilterMid] = useState<string>(mid);
    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
    const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
    const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
    const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');

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

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

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

    const onClickToSetFilter = () => {
        setMid(filterMid);
        setStartDate(filterStartDate);
        setEndDate(filterEndDate);
        setTransactionStatus(filterTransactionStatus);
        setMinAmount(filterMinAmount);
        setMaxAmount(filterMaxAmount);
        onClickToClose();
    };
    let MidOptions = [
        { name: 'nictest001m', value: 'nictest001m' }
    ];

    let transactionStatusOption = [
        { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
        { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
        { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
        { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL },
    ]

    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={filterMid}
                            selectSetter={setFilterMid}
                            selectOptions={MidOptions}
                        ></FilterSelect>
                        <FilterCalendar
                            title='조회기간'
                            startDate={filterStartDate}
                            endDate={filterEndDate}
                            setStartDate={setFilterStartDate}
                            setEndDate={setFilterEndDate}
                        ></FilterCalendar>

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

                        <FilterRangeAmount
                            title='상품가격'
                            minAmount={filterMinAmount}
                            maxAmount={filterMaxAmount}
                            setMinAmount={setFilterMinAmount}
                            setMaxAmount={setFilterMaxAmount}
                        ></FilterRangeAmount>

                    </div>
                    <div className="apply-row">
                        <button
                            className="btn-50 btn-blue flex-1"
                            onClick={() => onClickToSetFilter()}
                        >적용</button>
                    </div>
                </div>
            </motion.div>
        </>
    );
};