import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import { useEffect, useState } from 'react';
import { OptionsOrGroups } from 'react-select';
import AsyncSelect from 'react-select/async';
interface Promotion {
    type: string;
    name: string;
    amount: number;
    start_date: Date;
    end_date: Date;
    is_active: boolean;
    products: string[];
}
interface Product {
    value: string;
    label: string;
}
interface PromotionProps {
    promotion: Promotion;
    setPromotion: React.Dispatch<React.SetStateAction<Promotion>>;
    selectedProducts: Product;
    setSelectedProducts: React.Dispatch<React.SetStateAction<Product>>;
}
const ProductPromotionForm: React.FC<PromotionProps> = ({ promotion, setPromotion, selectedProducts, setSelectedProducts }) => {
    const handleChange = (e: any) => {
        setPromotion((prev) => ({
            ...prev,
            [e.target.name]: e.target.value,
        }));
    };
    const changeIsActive = (e: any) => {
        setPromotion((prev) => {
            return {
                ...prev,
                is_active: e.target.checked,
            };
        });
    };

    const changeType = (e: any) => {
        setPromotion((prev) => ({
            ...prev,
            type: e.target.value,
            amount: 0,
        }));
    };

    const getListProducts = async () => {
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/products/product-list`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    products: promotion.products,
                }),
                credentials: 'include', // Include this option
            });
            const data = await response.json();
            const formattedData = data.map((item: any) => ({ value: item.id, label: item.product_title }));

            setSelectedProducts(formattedData);
        } catch (error) {
            console.error('Error fetching data:', error);
            return [];
        }
    };
    useEffect(() => {
        if (promotion.products.length > 0) {
            getListProducts();
        }
    }, []);

    const fetchData = async (inputValue: string) => {
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/products/product-list?q=${inputValue}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include', // Include this option
            });
            const data = await response.json();
            return data.map((item: any) => ({ value: item.id, label: item.product_title }));
        } catch (error) {
            console.error('Error fetching data:', error);
            return [];
        }
    };

    let debounceTimeout: any;

    const loadOptions = async (inputValue: string): Promise<OptionsOrGroups<any, any>> => {
        return new Promise<OptionsOrGroups<any, any>>((resolve) => {
            clearTimeout(debounceTimeout);

            if (inputValue.length >= 3) {
                debounceTimeout = setTimeout(async () => {
                    try {
                        const options = await fetchData(inputValue);
                        const filteredOptions = options.filter((option: any) => !promotion.products.some((item: any) => item.item_id === option.value));

                        resolve(filteredOptions);
                    } catch (error) {
                        console.error('Error loading options:', error);
                        resolve([]);
                    }
                }, 1000);
            } else {
                resolve([]);
            }
        });
    };

    return (
        <div className="panel flex-1 px-0 py-6 ltr:xl:mr-6 rtl:xl:ml-6">
            <div className="flex flex-wrap justify-between px-4">
                <div className="mb-4 w-full lg:w-1/2 lg:max-w-fit">
                    <div className="text-lg">Detail Flash Sale : </div>

                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionTitle" className="mb-0 flex-1  ltr:mr-2 rtl:ml-2">
                            Title
                        </label>
                        <input
                            type="text"
                            id="promotionTitle"
                            placeholder="enter description promotion"
                            name="name"
                            value={promotion.name}
                            onChange={handleChange}
                            className="form-input w-2/3  lg:w-[250px]"
                        />
                    </div>
                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionType" className="mb-0 flex-1  ltr:mr-2 rtl:ml-2">
                            Type
                        </label>
                        <select name="promotion_type" id="promotionType" value={promotion.type} onChange={changeType} className="form-input w-2/3  lg:w-[250px]">
                            <option value="">select promotion type</option>
                            <option value="discount">Discount</option>
                            <option value="fixed">Fixed / Flat Price</option>
                        </select>
                    </div>
                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionAmount" className="mb-0 flex-1  ltr:mr-2 rtl:ml-2">
                            Amount
                        </label>
                        <input
                            type="number"
                            id="promotionAmount"
                            name="amount"
                            value={promotion.amount}
                            onChange={(e) =>
                                setPromotion((prev) => ({
                                    ...prev,
                                    amount: Number(e.target.value),
                                }))
                            }
                            className="form-input w-2/3  lg:w-[250px]"
                        />
                    </div>
                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionStart" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                            Start Date
                        </label>
                        <Flatpickr
                            data-enable-time
                            options={{
                                enableTime: true,
                                dateFormat: 'Y-m-d H:i',
                                position: 'auto left',
                                time_24hr: true,
                            }}
                            value={promotion.start_date}
                            className="form-input w-2/3  lg:w-[250px]"
                            placeholder="yyyy-mm-dd hh:mm"
                            onChange={(startDate) =>
                                setPromotion((prev: any) => {
                                    if (startDate) {
                                        return {
                                            ...prev,
                                            start_date: startDate,
                                        };
                                    }
                                })
                            }
                        />
                    </div>
                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionStart" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                            End Date
                        </label>
                        <Flatpickr
                            data-enable-time
                            options={{
                                enableTime: true,
                                dateFormat: 'Y-m-d H:i',
                                position: 'auto left',
                                time_24hr: true,
                            }}
                            value={promotion.end_date}
                            className="form-input w-2/3  lg:w-[250px]"
                            placeholder="yyyy-mm-dd hh:mm"
                            onChange={(endDate) =>
                                setPromotion((prev: any) => {
                                    if (endDate) {
                                        return {
                                            ...prev,
                                            end_date: endDate,
                                        };
                                    }
                                })
                            }
                        />
                    </div>

                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionIsActive" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                            Is Active ?
                        </label>
                        <label className="relative h-6 w-12">
                            <input
                                type="checkbox"
                                onChange={changeIsActive}
                                checked={promotion.is_active}
                                className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
                                id="promotion_is_active"
                            />
                            <span className="outline_checkbox bg-icon block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:bg-[url(/assets/images/close.svg)] before:bg-center before:bg-no-repeat before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary peer-checked:before:bg-[url(/assets/images/checked.svg)] dark:border-white-dark dark:before:bg-white-dark"></span>
                        </label>
                    </div>
                </div>
                <div className="mb-4 w-full lg:w-1/2 lg:max-w-full">
                    <div className="text-lg">List Producs : </div>

                    <div className="custom-select mt-4 flex items-center">
                        <AsyncSelect
                            isMulti
                            loadOptions={loadOptions}
                            className="w-full"
                            placeholder="Search for product"
                            classNamePrefix="user-form-select"
                            value={selectedProducts} // Use selectedProducts as the value
                            onChange={(selectedItems: any) => {
                                setSelectedProducts(selectedItems); // Update selectedProducts with the selected items
                            }}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};
export default ProductPromotionForm;