import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';

interface Billing {
    billing_name: string;
    billing_email: string;
    billing_phone: string;
}

interface BillingFormProps {
    billing: Billing;
    setBilling: React.Dispatch<React.SetStateAction<Billing>>;
    orderDate: any;
    setOrderDate: React.Dispatch<React.SetStateAction<any>>;
    paymentDate: any;
    setPaymentDate: React.Dispatch<React.SetStateAction<any>>;
}

const BillingForm: React.FC<BillingFormProps> = ({ billing, setBilling, orderDate, setOrderDate, paymentDate, setPaymentDate }) => {
    const handleBilling = (e: any) => {
        setBilling((prev) => ({
            ...prev,
            [e.target.name]: e.target.value,
        }));
    };

    return (
        <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">Billing To : </div>

                <div className="mt-4 flex items-center">
                    <label htmlFor="billing_name" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Name
                    </label>
                    <input id="billing_name" type="text" name="billing_name" className="form-input w-2/3 lg:w-[250px]" placeholder="Enter Name" value={billing.billing_name} onChange={handleBilling} />
                </div>
                <div className="mt-4 flex items-center">
                    <label htmlFor="customer_email" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Email
                    </label>
                    <input
                        id="billing_email"
                        type="email"
                        name="billing_email"
                        className="form-input w-2/3 lg:w-[250px]"
                        placeholder="Enter Email"
                        value={billing.billing_email}
                        onChange={handleBilling}
                    />
                </div>
                <div className="mt-4 flex items-center">
                    <label htmlFor="customer_phone" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Phone
                    </label>
                    <input id="billing_phone" type="text" name="billing_phone" className="form-input w-2/3 lg:w-[250px]" value={billing.billing_phone} onChange={handleBilling} />
                </div>
            </div>
            <div className="w-full lg:w-1/2">
                <div className="text-lg">Transaction Time : </div>

                <div className="mt-4 flex items-center">
                    <label htmlFor="startDate" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Order Date
                    </label>
                    <Flatpickr
                        data-enable-time
                        options={{
                            enableTime: true,
                            dateFormat: 'Y-m-d H:i',
                            position: 'auto left',
                            time_24hr: true,
                        }}
                        value={orderDate}
                        className="form-input w-2/3 lg:w-[250px]"
                        placeholder="yyyy-mm-dd hh:mm"
                        onChange={(orderDate) => setOrderDate(orderDate)}
                    />
                </div>
                <div className="mt-4 flex items-center">
                    <label htmlFor="dueDate" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Payment Date
                    </label>
                    <Flatpickr
                        data-enable-time
                        options={{
                            enableTime: true,
                            dateFormat: 'Y-m-d H:i',
                            position: 'auto left',
                            time_24hr: true,
                        }}
                        value={paymentDate}
                        className="form-input w-2/3 lg:w-[250px]"
                        placeholder="yyyy-mm-dd hh:mm"
                        onChange={(paymentDate) => setPaymentDate(paymentDate)}
                    />
                </div>
            </div>
        </div>
    );
};
export default BillingForm;