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

const MortgageCalculator4 = ({ data, updateData }: { data: any, updateData: (newData: any) => void }) => {
    return (
        <div className='mt-8 flex flex-col gap-6'>
            <Field
                id="isPropertyReady"
                name="isPropertyReady"
                label="هل العقار جاهز؟"
                required
                type="radio"
                options={[
                    { value: 'no', label: 'لا' },
                    { value: 'yes', label: 'نعم' },
                ]}
                value={data.isPropertyReady}
                onChange={(e) => updateData({ isPropertyReady: e.target.value })}
            />

            {data.isPropertyReady === 'yes' ? (
                <>
                    <Field
                        id="propertyPrice"
                        name="propertyPrice"
                        label="كم سعر العقار؟"
                        required
                        type="number"
                        placeholder="كم سعر العقار؟"
                        value={data.propertyPrice}
                        onChange={(e) => updateData({ propertyPrice: e.target.value })}
                        icon={<RiyalIcon />}
                    />

                    <Field
                        id="firstPayment"
                        name="firstPayment"
                        label="مبلغ الدفعة الأولى؟"
                        required
                        type="number"
                        placeholder="مبلغ الدفعة الأولى؟"
                        value={data.firstPayment}
                        onChange={(e) => updateData({ firstPayment: e.target.value })}
                        icon={<RiyalIcon />}
                    />

                    <div className="flex items-center gap-1 text-sm text-[#90A1B9]">
                        <div>
                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clipPath="url(#clip0_6569_7280)">
                                    <path d="M7.5 5V7.5M7.5 10H7.50625M13.75 7.5C13.75 10.9518 10.9518 13.75 7.5 13.75C4.04822 13.75 1.25 10.9518 1.25 7.5C1.25 4.04822 4.04822 1.25 7.5 1.25C10.9518 1.25 13.75 4.04822 13.75 7.5Z" stroke="#90A1B9" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_6569_7280">
                                        <rect width="15" height="15" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                        <p>عدل على المبلغ إذا عندك زيادة - الحد الأدنى لمبلغ الدفعة الأولى لعقارك هو 13,200 ريال</p>
                    </div>
                </>
            ) : data.isPropertyReady === "no" && (
                <Field
                    id="helpType"
                    name="helpType"
                    label="كيف ممكن نساعدك؟"
                    required
                    type="radio"
                    radioDirection='column'
                    options={[
                        { value: 'searching', label: 'لا زلت أبحث عن عقار' },
                        { value: 'financing', label: 'أبي أشوف كم يطلع لي كتمويل' },
                    ]}
                    value={data.helpType}
                    onChange={(e) => updateData({ helpType: e.target.value })}
                />
            )}

            {data.helpType && data.isPropertyReady === "no" && (
                <>
                    <Field
                        id="buyingTime"
                        name="buyingTime"
                        label="متى تفكر تشتري العقار؟"
                        required
                        type="radio"
                        radioDirection='column'
                        options={[
                            { value: 'soon', label: 'خلال الأشهر الثلاث القادمة' },
                            { value: 'researching', label: 'ليس الآن، في رحلة البحث والمقارنة الأولية' },
                            { value: 'unknown', label: 'لا أعلم' },
                        ]}
                        value={data.buyingTime}
                        onChange={(e) => updateData({ buyingTime: e.target.value })}
                    />
                </>
            )}

            {data.isPropertyReady === 'no' && (
                <>
                    <div>سنتواصل معك قريبا لتحقيق حلمك</div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <Field
                            id="fullName"
                            name="fullName"
                            label="الاسم بالكامل"
                            required
                            type="text"
                            placeholder="الاسم بالكامل"
                            value={data.fullName}
                            onChange={(e) => updateData({ fullName: e.target.value })}
                        />

                        <Field
                            id="whatsappNumber"
                            name="whatsappNumber"
                            label="رقم الواتس "
                            required
                            type="tel"
                            placeholder="رقم الواتس"
                            inputClassName="text-right"
                            dir="rtl"
                            value={data.whatsappNumber}
                            onChange={(e) => updateData({ whatsappNumber: e.target.value })}
                            icon={<WhatsAppIcon />}
                        />
                        <Field
                            id="city"
                            name="city"
                            label="المدينة"
                            required
                            type="select"
                            value={data.city}
                            onChange={(e) => updateData({ city: e.target.value })}
                            options={[
                                { value: 'riyadh', label: 'الرياض' },
                                { value: 'dammam', label: 'الدمام' },
                                { value: 'jeddah', label: 'تاروت' },
                                { value: 'makkah', label: 'سيهات' },
                            ]}

                            placeholder="المدينة"
                        />
                    </div>
                </>
            )}

        </div>
    )
}

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>
    )
};

const WhatsAppIcon = () => {
    return (
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.0293 2H9.03125C9.94221 1.99698 10.8452 2.17515 11.6865 2.52441C12.5277 2.87364 13.2908 3.38708 13.9316 4.03418L13.9336 4.03613C15.2421 5.34463 15.9619 7.08523 15.9619 8.94043C15.9617 12.7591 12.848 15.8721 9.0293 15.8721C7.8688 15.872 6.72849 15.5791 5.71387 15.0264L5.53906 14.9307L5.34766 14.9814L2.24609 15.7959L3.06934 12.7764L3.12402 12.5762L3.02051 12.3965C2.41851 11.3465 2.09669 10.157 2.09668 8.93262C2.09668 5.11386 5.21058 2.00017 9.0293 2ZM9.02246 2.25293C5.34132 2.25293 2.3418 5.25147 2.3418 8.93262L2.34668 9.16797C2.38862 10.3417 2.73832 11.4857 3.36328 12.4834L3.36719 12.4883L3.39551 12.5332L2.83203 14.5986L2.60449 15.4336L3.44141 15.2139L5.57715 14.6514L5.62207 14.6787L5.625 14.6807C6.65381 15.2882 7.82926 15.6122 9.0293 15.6123C12.7092 15.6123 15.7106 12.6216 15.6943 8.9375C15.6971 8.06074 15.5263 7.19214 15.1914 6.38184C14.8978 5.67153 14.483 5.01843 13.9668 4.45117L13.7402 4.21289C12.484 2.94955 10.8044 2.25302 9.02246 2.25293ZM6.39746 5.99707H6.70801L6.71582 6.0127C6.84852 6.34419 7.17509 7.13878 7.27734 7.37012C7.24145 7.44102 7.22886 7.46574 7.19531 7.50488C7.07715 7.64274 7.00868 7.73351 6.94336 7.79883C6.90625 7.83594 6.77422 7.95923 6.70898 8.14062C6.62758 8.36715 6.6725 8.5903 6.77832 8.7793L6.78223 8.78613L6.78613 8.79199C6.90204 8.98516 7.30124 9.64865 7.91602 10.1973V10.1982C8.68725 10.8874 9.37185 11.1247 9.52539 11.1982V11.1973C9.65171 11.2614 9.82891 11.3293 10.0332 11.3057C10.2611 11.2792 10.419 11.153 10.5225 11.0312L10.5234 11.0322C10.6089 10.9345 10.8743 10.6169 11.0479 10.3877C11.3175 10.5121 12.0192 10.855 12.2031 10.9434C12.2368 10.9595 12.269 10.9744 12.2969 10.9873C12.2861 11.0979 12.2581 11.2488 12.1973 11.417L12.1943 11.4248C12.1761 11.4772 12.0754 11.6078 11.8496 11.7529C11.6892 11.856 11.5321 11.9243 11.4277 11.957L11.3428 11.9775C11.0555 12.0174 10.7366 12.0311 10.3975 11.9219L10.3906 11.9189C10.1313 11.8397 9.8065 11.7339 9.38867 11.5498L9.38477 11.5488L9.07129 11.3984C7.53549 10.5976 6.51999 9.05168 6.42285 8.91406L6.41504 8.90234L6.27539 8.70508C6.20853 8.60365 6.12688 8.46999 6.04785 8.31445C5.88591 7.99569 5.75684 7.62707 5.75684 7.28223C5.75694 6.58438 6.09839 6.26204 6.27051 6.06836C6.30492 6.03104 6.33453 6.01545 6.35352 6.00781C6.37451 5.99941 6.39107 5.99707 6.39746 5.99707Z" fill="#1D293D" stroke="#90A1B9" />
        </svg>
    );
}

export default MortgageCalculator4;