import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';
import Select from 'react-select';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';

interface Filter {
    payment_type: string;
    customer_name: string;
    date_range: string;
    admin_notes: string;
}

interface FilterOrdersProps {
    showModalFilter: boolean;
    setShowModalFilter: React.Dispatch<React.SetStateAction<boolean>>;
    appliedFilter: Filter; // Use the same Filter interface you defined earlier
    setAppliedFilter: React.Dispatch<React.SetStateAction<Filter>>;
    applyFilter: () => void;
}

const customStyles = {
    menu: (provided: any, state: any) => ({
        ...provided,
        // maxHeight: '200px', // Set a maximum height
        overflowY: 'hidden', // Disable dropdown scroll
    }),
};
function formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

const listPayment = [
    { value: 'bca_va', label: 'Bank Transfer - BCA VA' },
    { value: 'echannel', label: 'Bank Transfer - Mandiri VA' },
    { value: 'bni_va', label: 'Bank Transfer - BNI VA' },
    { value: 'permata_va', label: 'Bank Transfer - Permata VA' },
    { value: 'other_va', label: 'Bank Transfer - Other' },
    { value: 'shopeepay', label: 'ShopeePay / SPayLater' },
    { value: 'gopay', label: 'GoPay' },
    { value: 'ovo', label: 'OVO' },
    { value: 'qris', label: 'QRIS' },
    { value: 'alfamart', label: 'Alfamart Group (Alfamart, Alfamidi, Dan+Dan)' },
    { value: 'credit_card', label: 'Credit/Debit Card' },
    { value: 'bca_installment', label: 'BCA Installment' },
    { value: 'mandiri_installment', label: 'Mandiri Installment' },
    { value: 'kredivo', label: 'Kredivo' },
    { value: 'akulaku', label: 'Akulaku' },
];

const listAdminNotes = [
    { value: 'wa', label: 'Order by WA' },
    { value: 'tradein', label: 'Trade In' },
    { value: 'tradeinseratus', label: 'Trade In 100%' },
    { value: 'penambahanwedding', label: 'Penambahan Wedding' },
    { value: 'powedding', label: 'PO Wedding' },
    { value: 'popersonal', label: 'PO Personal' },
    { value: 'oplino', label: 'On Process LINO' },
];

const FilterOrders: React.FC<FilterOrdersProps> = ({ showModalFilter, setShowModalFilter, appliedFilter, setAppliedFilter, applyFilter }) => {
    return (
        <Transition appear show={showModalFilter} as={Fragment}>
            <Dialog as="div" open={showModalFilter} onClose={() => setShowModalFilter(false)}>
                <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
                    <div className="fixed inset-0" />
                </Transition.Child>
                <div className="fixed inset-0 z-[999] overflow-y-auto bg-[black]/60">
                    <div className="flex min-h-screen items-center justify-center px-4">
                        <Transition.Child
                            as={Fragment}
                            enter="ease-out duration-300"
                            enterFrom="opacity-0 scale-95"
                            enterTo="opacity-100 scale-100"
                            leave="ease-in duration-200"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95"
                        >
                            <Dialog.Panel as="div" className="panel my-8 w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 text-black dark:text-white-dark">
                                <div className="flex items-center justify-between bg-[#fbfbfb] px-5 py-3 dark:bg-[#121c2c]">
                                    <h5 className="text-lg font-bold">Filter Order</h5>
                                    <button type="button" className="text-white-dark hover:text-dark" onClick={() => setShowModalFilter(false)}>
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="20"
                                            height="20"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            strokeWidth="1.5"
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                        >
                                            <line x1="18" y1="6" x2="6" y2="18"></line>
                                            <line x1="6" y1="6" x2="18" y2="18"></line>
                                        </svg>
                                    </button>
                                </div>
                                <div className="p-5">
                                    <div className="mb-5">
                                        <label htmlFor="addonsLeft">Payment Type</label>
                                        <div className="custom-select">
                                            <Select
                                                styles={customStyles}
                                                placeholder="Select an option"
                                                value={listPayment.find((option) => option.value === appliedFilter.payment_type)}
                                                options={listPayment}
                                                onChange={(selectedOption: any) => {
                                                    if (selectedOption) {
                                                        setAppliedFilter({
                                                            ...appliedFilter,
                                                            payment_type: selectedOption.value,
                                                        });
                                                    }
                                                }}
                                            />
                                        </div>
                                    </div>
                                    <div className="mb-5">
                                        <label htmlFor="addonsLeft">Customer Name</label>
                                        <input
                                            type="text"
                                            value={appliedFilter.customer_name}
                                            onChange={(event: any) =>
                                                setAppliedFilter({
                                                    ...appliedFilter,
                                                    customer_name: event.target.value,
                                                })
                                            }
                                            placeholder="Input Customer Name"
                                            className="form-input"
                                        />
                                    </div>
                                    <div className="mb-5">
                                        <label htmlFor="adminNotes">Admin Notes</label>
                                        <div className="custom-select">
                                            <Select
                                                styles={customStyles}
                                                placeholder="Select an option"
                                                isClearable
                                                value={listAdminNotes.find((option) => option.value === appliedFilter.admin_notes) || null}
                                                options={listAdminNotes}
                                                onChange={(selectedOption: any) => {
                                                    setAppliedFilter({
                                                        ...appliedFilter,
                                                        admin_notes: selectedOption ? selectedOption.value : '',
                                                    });
                                                }}
                                            />
                                        </div>
                                    </div>
                                    <div className="mb-5">
                                        <label htmlFor="addonsLeft">Date Range</label>
                                        <Flatpickr
                                            options={{
                                                mode: 'range',
                                                dateFormat: 'Y-m-d',
                                                position: 'auto left',
                                            }}
                                            defaultValue={appliedFilter.date_range}
                                            className="form-input"
                                            placeholder="Select Date Range"
                                            onChange={(dateRange) => {
                                                if (Array.isArray(dateRange) && dateRange.length === 2) {
                                                    const startDate = formatDate(dateRange[0]);
                                                    const endDate = formatDate(dateRange[1]);
                                                    setAppliedFilter({
                                                        ...appliedFilter,
                                                        date_range: `${startDate} to ${endDate}`,
                                                    });
                                                }
                                            }}
                                        />
                                    </div>

                                    <div className="mt-80 flex items-center justify-end">
                                        <button type="button" className="btn btn-outline-danger" onClick={() => setShowModalFilter(false)}>
                                            Discard
                                        </button>
                                        <button type="button" className="btn btn-primary ltr:ml-4 rtl:mr-4" onClick={() => applyFilter()}>
                                            Apply
                                        </button>
                                    </div>
                                </div>
                            </Dialog.Panel>
                        </Transition.Child>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
};
export default FilterOrders;