import { useState } from "react";
import Field from "../ui/Field";

const MortgageCalculator1 = ({ data, updateData }: { data: any, updateData: (newData: any) => void }) => {
    const handleMortgageTypeChange = (value: string) => {
        updateData({ mortgageType: value });
    };
    return (
        <div className='mt-8 flex flex-col gap-6'>
            <Field
                id="mortgageType"
                name="mortgageType"
                label="نوع التمويل العقاري"
                required
                type="select"
                options={[
                    { value: 'ready_unit', label: 'وحدة جاهزة' },
                    { value: 'off_plan', label: 'بيع على الخريطة' },
                    { value: 'self_build', label: 'بناء ذاتي' },
                    { value: 'other', label: 'أخرى' },
                ]}
                value={data.mortgageType}
                onChange={(e) => handleMortgageTypeChange(e.target.value)}
                placeholder="نوع التمويل العقاري"
            />
            {data.mortgageType === 'off_plan' ? (
                <Field
                    id="projectName"
                    name="projectName"
                    label="اسم المشروع (اختياري)"
                    type="text"
                    onChange={(e) => updateData({ projectName: e.target.value })}
                    value={data.projectName}
                    placeholder="اسم المشروع"
                />
            ) : data.mortgageType === "self_build" ? (
                <Field
                    id="selfBuildType"
                    name="selfBuildType"
                    label="نوع البناء الذاتي"
                    required
                    type="radio"
                    radioDirection="column"
                    value={data.selfBuildType}
                    onChange={(e) => updateData({ selfBuildType: e.target.value })}
                    options={[
                        { value: 'buy_land_and_build', label: 'شراء أرض وبناءها' },
                        { value: 'own_land_and_build_on_it', label: 'أمتلك أرض وأرغب ببناءها' },
                        { value: 'gift_land_and_build_on_it', label: 'مُنحت أرض الإسكان وأرغب ببناءها' },
                    ]}
                />
            ) : data.mortgageType === 'other' && (
                <Field
                    id="mortgageTypeOther"
                    name="mortgageTypeOther"
                    label="ما معنى أخرى"
                    required
                    type="text"
                    value={data.mortgageTypeOther}
                    onChange={(e) => updateData({ mortgageTypeOther: e.target.value })}
                    placeholder="نوع التمويل (أخرى)"
                />
            )}

            <Field
                id="supportProgram"
                name="supportProgram"
                label='هل أنت مستحق لبرنامج الدعم"سكني"؟'
                required
                type="radio"
                options={[
                    { value: 'no', label: 'لا' },
                    { value: 'yes', label: 'نعم' },
                ]}
                value={data.supportProgram}
                onChange={(e) => updateData({ supportProgram: e.target.value })}
            />

            {data.supportProgram === 'no' && (
                <Field
                    id="firstProperty"
                    name="firstProperty"
                    label="هل هذا مسكنك الأول؟"
                    required
                    type="radio"
                    options={[
                        { value: 'no', label: 'لا' },
                        { value: 'yes', label: 'نعم' },
                    ]}
                    value={data.firstProperty}
                    onChange={(e) => updateData({ firstProperty: e.target.value })}
                />
            )}
        </div>
    );
}

export default MortgageCalculator1;;