import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
import Button from '@/components/button/PrimaryButton';
import { AddressDisplay } from './AddressDisplay';
import { AddressForm } from './AddressForm';
import { Address, NominatimReverseGeocodingResponse } from '../../types/Types';
import { Location } from 'iconsax-react';

interface AddressDetailsModalProps {
    visible: boolean;
    selectedAddress: NominatimReverseGeocodingResponse | null;
    existingAddress?: Address | null;
    formData: {
        title: string;
        addressDetails: string;
        phone: string;
        postalCode: string;
        isDefault: boolean;
    };
    isPending: boolean;
    editMode?: boolean;
    onClose: () => void;
    onChangePosition?: () => void;
    onFormDataChange: (data: Partial<AddressDetailsModalProps['formData']>) => void;
    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

export const AddressDetailsModal = ({
    visible,
    selectedAddress,
    existingAddress,
    formData,
    isPending,
    editMode = false,
    onClose,
    onChangePosition,
    onFormDataChange,
    onSubmit,
}: AddressDetailsModalProps) => {
    return (
        <AnimatedBottomSheet
            bgOpacity={0}
            inDuration={0}
            blurOpacity={null}
            noBlur
            visible={visible}
            title={editMode ? 'ویرایش آدرس' : 'آدرس'}
            onClick={onClose}
            overrideClassName='bg-container!'
        >
            <form onSubmit={onSubmit}>
                <div className='px-4'>
                    <AddressDisplay selectedAddress={selectedAddress} existingAddress={existingAddress} />
                    {editMode && onChangePosition && (
                        <div className='mt-4 mb-6 flex justify-end'>
                            <Button
                                type='button'
                                onClick={(e) => {
                                    e.preventDefault();
                                    onChangePosition();
                                }}
                                className='bg-background! pattern-secondary-bg w-fit! text-foreground! flex items-center gap-2 text-xs'
                                disabled={isPending}
                            >
                                <Location color='#6b7280' variant='Bold' className='size-4' />
                                تغییر موقعیت روی نقشه
                            </Button>
                        </div>
                    )}
                    <AddressForm
                        formData={formData}
                        selectedAddress={selectedAddress}
                        onFormDataChange={onFormDataChange}
                    />
                    <div className='grid grid-cols-2 gap-4 mt-16'>
                        <Button
                            type='submit'
                            disabled={isPending}
                        >
                            {isPending ? (editMode ? 'در حال به‌روزرسانی...' : 'در حال ثبت...') : (editMode ? 'به‌روزرسانی' : 'تایید')}
                        </Button>
                        <Button
                            type='button'
                            onClick={onClose}
                            className='bg-disabled! text-foreground!'
                            disabled={isPending}
                        >
                            انصراف
                        </Button>
                    </div>
                </div>
            </form>
        </AnimatedBottomSheet>
    );
};

