import InputField from '@/components/input/InputField';
import { NominatimReverseGeocodingResponse } from '../../types/Types';
import { useGetProfile } from '../../../hooks/userProfileData';
import { useEffect } from 'react';

interface AddressFormProps {
    formData: {
        title: string;
        addressDetails: string;
        phone: string;
        postalCode: string;
        city: string;
        province: string;
        isDefault: boolean;
    };
    selectedAddress: NominatimReverseGeocodingResponse | null;
    onFormDataChange: (data: Partial<AddressFormProps['formData']>) => void;
}

export const AddressForm = ({
    formData,
    selectedAddress,
    onFormDataChange,
}: AddressFormProps) => {

    const { data: profileData } = useGetProfile()

    useEffect(() => {
        if (profileData?.data?.phone && !formData.phone) {
            onFormDataChange({ phone: '0' + profileData.data.phone });
        }
    }, [profileData?.data?.phone, formData.phone, onFormDataChange]);

    return (
        <div className='px-4'>
            <InputField
                htmlFor={'addressTitle'}
                labelText={'عنوان آدرس'}
                placeholder='مثال: منزل، محل کار ...'
                className='bg-inherit'
                inputClassName='text-xs!'
                value={formData.title}
                onChange={(e) => onFormDataChange({ title: e.target.value })}

            />
            <InputField
                htmlFor={'addressDetails'}
                labelText={'جزئیات آدرس'}
                placeholder='میدان باغ ملی، مجتمع آسمان، واحد 12، پلاک 1234567890'
                className='bg-inherit mt-8'
                value={formData.addressDetails}
                onChange={(e) => onFormDataChange({ addressDetails: e.target.value })}
                inputClassName='text-xs!'
            />
            <InputField
                htmlFor={'province'}
                labelText={'استان'}
                placeholder={selectedAddress?.address?.state || selectedAddress?.address?.province || 'مثال: تهران'}
                className='bg-inherit mt-8'
                value={formData.province || selectedAddress?.address?.state || selectedAddress?.address?.province || ''}
                onChange={(e) => onFormDataChange({ province: e.target.value })}
                inputClassName='text-xs!'
            />
            <InputField
                htmlFor={'city'}
                labelText={'شهر'}
                placeholder={selectedAddress?.address?.city || selectedAddress?.address?.district || 'مثال: تهران'}
                className='bg-inherit mt-8'
                value={formData.city || selectedAddress?.address?.city || selectedAddress?.address?.district || ''}
                onChange={(e) => onFormDataChange({ city: e.target.value })}
                inputClassName='text-xs!'
            />
            <InputField
                htmlFor={'phone'}
                labelText={'شماره تلفن'}
                placeholder='09123456789'
                className='bg-inherit mt-8'
                value={formData.phone}
                onChange={(e) => onFormDataChange({ phone: e.target.value })}
                inputClassName='text-xs!'
            />
            <InputField
                htmlFor={'postalCode'}
                labelText={'کد پستی'}
                placeholder={selectedAddress?.address?.postcode || '1234567890'}
                className='bg-inherit mt-8'
                value={formData.postalCode || selectedAddress?.address?.postcode || ''}
                onChange={(e) => onFormDataChange({ postalCode: e.target.value })}
                inputClassName='text-xs!'
            />
            <div className='inline-flex justify-between items-center w-full mt-8'>
                <label
                    htmlFor={'isDefault'}
                    className='text-sm2 px-2 py-0.5 mt-0.5 cursor-pointer'
                >
                    تنظیم به عنوان آدرس پیش‌فرض
                </label>
                <input
                    name={'isDefault'}
                    id={'isDefault'}
                    className='h-4.5 w-4.5 checked:accent-primary cursor-pointer'
                    onChange={(e) => onFormDataChange({ isDefault: e.target.checked })}
                    type='checkbox'
                    checked={formData.isDefault}
                />
            </div>
        </div>
    );
};

