import { useEffect, useState } from 'react';
import { getProvince, getCity, getDistrict } from '@/lib/address-lib';
import Select from 'react-select';

interface Options {
    value: string;
    label: string;
}
interface Shipping {
    shipping_name: string;
    shipping_phone: string;
    shipping_address: string;
    shipping_province: string;
    shipping_city: string;
    shipping_kecamatan: string;
    shipping_postcode: string;
    shipping_kelurahan: string;
}

interface ShippingFormProps {
    shipping: Shipping;
    setShipping: React.Dispatch<React.SetStateAction<Shipping>>;
}

const ShippingForm: React.FC<ShippingFormProps> = ({ shipping, setShipping }) => {
    const provinceList = getProvince();
    const [dataKecamatan, setDataKecamatan] = useState<Options[]>([]);
    const [dataKota, setDataKota] = useState<Options[]>([]);

    const handleShipping = (e: any) => {
        setShipping((prev) => ({
            ...prev,
            [e.target.name]: e.target.value,
        }));
    };

    useEffect(() => {
        const cityList = getCity(shipping.shipping_province);
        setDataKota(cityList);
    }, [shipping.shipping_province]);

    useEffect(() => {
        const districtList = getDistrict(shipping.shipping_city);
        setDataKecamatan(districtList);
    }, [shipping.shipping_city]);

    return (
        <div className="flex flex-col justify-between lg:flex-row">
            <div className="mb-6 w-full lg:w-1/2 ltr:lg:mr-6 rtl:lg:ml-6">
                <div className="text-lg">Shipping To : </div>
                <div className="mt-4 flex items-center">
                    <label htmlFor="shipping_name" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        Name
                    </label>
                    <input id="shipping_name" type="text" name="shipping_name" className="form-input flex-1" placeholder="Enter Name" value={shipping.shipping_name} onChange={handleShipping} />
                </div>

                <div className="mt-4 flex items-center">
                    <label htmlFor="shipping_phone" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        Phone
                    </label>
                    <input id="shipping_phone" type="text" name="shipping_phone" className="form-input flex-1" placeholder="Enter Phone" value={shipping.shipping_phone} onChange={handleShipping} />
                </div>
            </div>
            <div className="w-full lg:w-1/2">
                <div className="text-lg">Address Details :</div>
                <div className="mt-4 flex items-center">
                    <label htmlFor="shipping_address" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        Address
                    </label>
                    <textarea
                        id="shipping_address"
                        name="shipping_address"
                        className="form-input flex-1"
                        placeholder="Enter Address"
                        rows={5}
                        value={shipping.shipping_address}
                        onChange={handleShipping}
                    ></textarea>
                </div>
                <div className="custom-select mt-4 flex items-center">
                    <label htmlFor="shipping_province" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        Provinsi
                    </label>
                    <Select
                        options={provinceList}
                        id="shipping_province"
                        value={provinceList.find((options) => options.value === shipping.shipping_province)}
                        className=" flex-1"
                        placeholder="Enter Province"
                        name="shipping_province"
                        onChange={(selectedOption: any) => {
                            if (selectedOption) {
                                setShipping({
                                    ...shipping,
                                    shipping_province: selectedOption.value,
                                    shipping_city: '',
                                    shipping_kecamatan: '',
                                });
                            }
                        }}
                    />
                </div>
                <div className="custom-select mt-4 flex items-center">
                    <label htmlFor="shipping_province" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        City
                    </label>
                    <Select
                        options={dataKota}
                        id="shipping_city"
                        value={dataKota.find((options) => options.value === shipping.shipping_city) || null}
                        className=" flex-1"
                        placeholder="Enter City"
                        name="shipping_city"
                        onChange={(selectedOption: any) => {
                            if (selectedOption) {
                                setShipping({
                                    ...shipping,
                                    shipping_city: selectedOption.value,
                                    shipping_kecamatan: '',
                                });
                            }
                        }}
                    />
                </div>
                <div className="custom-select mt-4 flex items-center">
                    <label htmlFor="shipping_kecamatan" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        Kecamatan
                    </label>
                    <Select
                        options={dataKecamatan}
                        id="shipping_kecamatan"
                        value={dataKecamatan.find((options) => options.value === shipping.shipping_kecamatan) || null}
                        className=" flex-1"
                        placeholder="Enter Kecamatan"
                        name="shipping_kecamatan"
                        onChange={(selectedOption: any) => {
                            if (selectedOption) {
                                setShipping({
                                    ...shipping,
                                    shipping_kecamatan: selectedOption.value,
                                });
                            }
                        }}
                    />
                </div>
                <div className="mt-4 flex items-center">
                    <label htmlFor="shipping_kelurahan" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        Kelurahan
                    </label>
                    <input
                        id="shipping_kelurahan"
                        type="text"
                        name="shipping_kelurahan"
                        className="form-input flex-1"
                        placeholder="Enter Kelurahan"
                        value={shipping.shipping_kelurahan}
                        onChange={(e) => setShipping({
                            ...shipping,
                            shipping_kelurahan: e.target.value.toUpperCase(),
                        })}
                    />
                </div>
                <div className="mt-4 flex items-center">
                    <label htmlFor="shipping_postcode" className="mb-0 w-1/3 ltr:mr-2 rtl:ml-2">
                        Postcode
                    </label>
                    <input
                        id="shipping_postcode"
                        type="number"
                        name="shipping_postcode"
                        className="form-input flex-1"
                        placeholder="Enter Postcode"
                        value={shipping.shipping_postcode}
                        onChange={handleShipping}
                    />
                </div>
            </div>
        </div>
    );
};
export default ShippingForm;