import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';
import Select from 'react-select';

interface Filter {
    coupon_type: string;
    coupon_categories: 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 listType = [
    { value: 'percentage', label: 'Percentage' },
    { value: 'fixed', label: 'Fixed' },
];

const FilterCoupon: 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 Coupon</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">Coupon Type</label>
                                        <div className="custom-select">
                                            <Select
                                                placeholder="Select an option"
                                                value={listType.find((option) => option.value === appliedFilter.coupon_type)}
                                                options={listType}
                                                onChange={(selectedOption: any) => {
                                                    if (selectedOption) {
                                                        setAppliedFilter({
                                                            ...appliedFilter,
                                                            coupon_type: selectedOption.value,
                                                        });
                                                    }
                                                }}
                                            />
                                        </div>
                                    </div>
                                    <div className="mb-5">
                                        <label htmlFor="addonsLeft">Categories</label>
                                        <input
                                            type="text"
                                            value={appliedFilter.coupon_categories}
                                            onChange={(event) =>
                                                setAppliedFilter({
                                                    ...appliedFilter,
                                                    coupon_categories: event.target.value,
                                                })
                                            }
                                            placeholder="Input Coupon Category"
                                            className="form-input"
                                        />
                                    </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 FilterCoupon;