import { useState } from "react";
import Field from "../ui/Field";
import { appointmentHijriYears, birthHijriYears, hijriMonths } from "./yearsAndMonthsHijri";

const MortgageCalculator2 = ({ data, updateData }: { data: any, updateData: (newData: any) => void }) => {
    return (
        <div className='mt-8 flex flex-col gap-6'>
            <Field
                id="jobSector"
                name="jobSector"
                label="قطاع عملك"
                required
                type="select"
                value={data.jobSector}
                onChange={(e) => updateData({ jobSector: e.target.value })}
                options={[
                    { value: 'military', label: 'قطاع عسكري' },
                    { value: 'government', label: 'قطاع حكومي' },
                    { value: 'medium_large_company', label: 'شركة متوسطة أو كبرى' },
                    { value: 'small_company', label: 'شركة صغيرة' },
                ]}

                placeholder="قطاع عسكري"
            />

            {data.jobSector === 'military' && (
                <Field
                    id="rank"
                    name="rank"
                    label="الرتبة"
                    required
                    type="select"
                    value={data.rank}
                    onChange={(e) => updateData({ rank: e.target.value })}
                    options={[
                        { value: 'soldier', label: 'جندي' },
                        { value: 'first_soldier', label: 'جندي أول' },
                        { value: 'corporal', label: 'عريف' },
                        { value: 'vice_sergeant', label: 'وكيل رقيب' },
                        { value: 'sergeant', label: 'رقيب' },
                        { value: 'first_sergeant', label: 'رقيب أول' },
                        { value: 'chief_sergeant', label: 'رئيس رقباء' },

                        { value: 'lieutenant', label: 'ملازم' },
                        { value: 'first_lieutenant', label: 'ملازم أول' },
                        { value: 'captain', label: 'نقيب' },
                        { value: 'major', label: 'رائد' },
                        { value: 'lieutenant_colonel', label: 'مقدم' },
                        { value: 'colonel', label: 'عقيد' },
                        { value: 'brigadier_general', label: 'عميد' },
                        { value: 'major_general', label: 'لواء' },

                        { value: 'pilot_lieutenant', label: 'ملازم طيار' },
                        { value: 'pilot_first_lieutenant', label: 'ملازم أول طيار' },
                        { value: 'pilot_captain', label: 'نقيب طيار' },
                        { value: 'pilot_major', label: 'رائد طيار' },
                        { value: 'pilot_lieutenant_colonel', label: 'مقدم طيار' },
                        { value: 'pilot_colonel', label: 'عقيد طيار' },
                        { value: 'pilot_brigadier_general', label: 'عميد طيار' },
                        { value: 'pilot_major_general', label: 'لواء طيار' },
                    ]}
                    placeholder="جندي"
                />
            )}

            <div>تاريخ الميلاد (هجري)</div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Field
                    id="birthMonth"
                    name="birthMonth"
                    label="الشهر"
                    required
                    type="select"
                    value={data.birthMonth}
                    onChange={(e) => updateData({ birthMonth: e.target.value })}
                    options={hijriMonths}
                    placeholder="الشهر"
                />

                <Field
                    id="birthYear"
                    name="birthYear"
                    label="السنة"
                    required
                    type="select"
                    value={data.birthYear}
                    onChange={(e) => updateData({ birthYear: e.target.value })}
                    options={birthHijriYears}
                    placeholder="الشهر"
                />
            </div>

            <Field
                id="basicSalary"
                name="basicSalary"
                label="راتبك الاساسي"
                required
                type="number"
                value={data.basicSalary}
                onChange={(e) => updateData({ basicSalary: e.target.value })}
                placeholder="راتبك الاساسي"
                icon={<RiyalIcon />}
            />

            <Field
                id="netMonthlySalary"
                name="netMonthlySalary"
                label="صافي راتبك الشهري"
                required
                type="number"
                value={data.netMonthlySalary}
                onChange={(e) => updateData({ netMonthlySalary: e.target.value })}
                placeholder="صافي راتبك الشهري"
                icon={<RiyalIcon />}
            />

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

export default MortgageCalculator2;;