import { useState } from "react";
import UploadImage from "../rental-contracts/UploadImage";
import { Button } from "../ui/button";
import Field from "../ui/Field";

type AccurateMortgageCalculatorProps = {
    setDialogOpen: (open: boolean) => void;
    onSubmit: (data: any) => Promise<void>;
}

export default function AccurateMortgageCalculator({ setDialogOpen, onSubmit }: AccurateMortgageCalculatorProps) {
    const [localData, setLocalData] = useState<any>({
        fullName: '',
        age: '',
        job: '',
        bank: '',
        salary: '',
        appointmentDate: '',
        maritalStatus: '',
        commitments: '',
        id_image: null,
        salary_certificate: null,
    });

    const updateLocalData = (newData: any) => {
        setLocalData((prev: any) => ({ ...prev, ...newData }));
    };

    const handleFormSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        await onSubmit(localData);
    };

    return (
        <form onSubmit={handleFormSubmit}>
            <div className='mt-6 grid grid-cols-1 md:grid-cols-2 gap-4'>
                <Field
                    id="fullName"
                    name="fullName"
                    label="الاسم"
                    required
                    type="text"
                    placeholder="الاسم"
                    value={localData.fullName}
                    onChange={(e) => updateLocalData({ fullName: e.target.value })}
                />

                <Field
                    id="age"
                    name="age"
                    label="العمر"
                    required
                    type="number"
                    placeholder="العمر"
                    value={localData.age}
                    onChange={(e) => updateLocalData({ age: e.target.value })}
                />

                <Field
                    id="job"
                    name="job"
                    label="الوظيفة"
                    required
                    type="text"
                    placeholder="الوظيفة"
                    value={localData.job}
                    onChange={(e) => updateLocalData({ job: e.target.value })}
                />
                <Field
                    id="bank"
                    name="bank"
                    label="البنك"
                    required
                    type="select"
                    value={localData.bank}
                    onChange={(e) => updateLocalData({ bank: e.target.value })}
                    options={[
                        { value: 'rajhi', label: 'بنك الراجحي' },
                        { value: 'alahli', label: 'البنك الأهلي السعودي' },
                        { value: 'riyad', label: 'بنك الرياض' },
                        { value: 'samba', label: 'بنك سامبا' },
                        { value: 'saib', label: 'البنك السعودي للاستثمار' },
                        { value: 'anb', label: 'البنك العربي الوطني' },
                    ]}
                    placeholder="البنك"
                />

                <Field
                    id="salary"
                    name="salary"
                    label="الراتب"
                    required
                    type="number"
                    placeholder="الراتب"
                    value={localData.salary}
                    onChange={(e) => updateLocalData({ salary: e.target.value })}
                    icon={<RiyalIcon />}
                />

                <Field
                    id="appointmentDate"
                    name="appointmentDate"
                    label="تاريخ التعيين"
                    required
                    type="date"
                    placeholder="تاريخ التعيين"
                    value={localData.appointmentDate}
                    onChange={(e) => updateLocalData({ appointmentDate: e.target.value })}
                />

                <Field
                    id="maritalStatus"
                    name="maritalStatus"
                    label="اعزب"
                    required
                    type="select"
                    value={localData.maritalStatus}
                    onChange={(e) => updateLocalData({ maritalStatus: e.target.value })}
                    options={[
                        { value: 'married', label: 'متزوج' },
                        { value: 'single', label: 'غير متزوج' },
                    ]}
                    placeholder="اعزب"
                />

                <Field
                    className="mt-4 md:col-span-2"
                    id="commitments"
                    name="commitments"
                    required
                    label='الالتزمات'
                    type="textarea"
                    placeholder="اضف تفاصيل اضافية"
                    value={localData.commitments}
                    onChange={(e) => updateLocalData({ commitments: e.target.value })}
                />

            </div>
            <div className="mt-4">
                <p className="mb-2 text-sm text-[#45556C]">الموفقات</p>
                <div className="flex flex-col md:flex-row gap-2 md:gap-4">
                    <UploadImage className="flex-1" title=" اختر صورة تعريف الراتب" onChange={(file: File | null) => updateLocalData({ salary_certificate: file })} />
                    <UploadImage className="flex-1" title="اختر صوره بطاقة الاحوال" onChange={(file: File | null) => updateLocalData({ id_image: file })} />
                </div>
            </div>

            <div className="mt-4 flex justify-center gap-2">
                <Button type="submit" className="px-10 rounded-full">
                    حفظ وإرسال
                </Button>
                <Button type="button" onClick={() => setDialogOpen(false)} className="px-10 rounded-full bg-[#FEF2F2] hover:bg-[#FADDDD] text-[#E7000B]">
                    الغاء
                </Button>
            </div>
        </form>
    );
};

const RiyalIcon = () => {
    return (
        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.3851 12.8339C17.7063 12.1968 17.9187 11.5051 18 10.7799L12.7051 11.7875V9.85051L17.385 8.96067C17.7062 8.32356 17.9185 7.63187 17.9998 6.90664L12.7049 7.91339V0.947429C11.8936 1.35503 11.173 1.89758 10.5873 2.53756V8.31625L8.46967 8.71898V0C7.65833 0.407453 6.93778 0.950151 6.35206 1.59013V9.12156L1.61387 10.0224C1.29267 10.6595 1.08019 11.3512 0.998683 12.0765L6.35206 11.0585V13.4978L0.61487 14.5887C0.293664 15.2258 0.0813422 15.9175 0 16.6427L6.00523 15.5008C6.49408 15.4099 6.91425 15.1513 7.18741 14.7954L8.28874 13.3345V13.3342C8.40306 13.1831 8.46967 13.0008 8.46967 12.8045V10.6558L10.5873 10.2531V14.127L17.385 12.8336L17.3851 12.8339Z" fill="#90A1B9" />
        </svg>
    )
}