'use client';

import InputField from '@/components/input/InputField';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
import { useCheckoutStore } from '../../store/Store';
import { useCallback, useEffect } from 'react';

export const CarAddressSection = () => {
    const { carAddress, setCarAddress } = useCheckoutStore();

    const handleCarModelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setCarAddress({
            carModel: e.target.value,
            carColor: carAddress?.carColor || '',
            plateNumber: carAddress?.plateNumber || '',
        });
    }, [carAddress, setCarAddress]);

    const handleCarColorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setCarAddress({
            carModel: carAddress?.carModel || '',
            carColor: e.target.value,
            plateNumber: carAddress?.plateNumber || '',
        });
    }, [carAddress, setCarAddress]);

    const handlePlateNumberChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setCarAddress({
            carModel: carAddress?.carModel || '',
            carColor: carAddress?.carColor || '',
            plateNumber: e.target.value,
        });
    }, [carAddress, setCarAddress]);

    useEffect(() => {
        if (!carAddress) {
            setCarAddress({
                carModel: '',
                carColor: '',
                plateNumber: '',
            });
        }
    }, [carAddress, setCarAddress]);

    return (
        <section className={glassSurfaceCard('p-4')}>
            <div className="py-3">
                <h3 className="text-sm2 font-medium leading-5 mb-4">
                    اطلاعات خودرو
                </h3>
                <div className="flex flex-col gap-4">
                    <InputField
                        htmlFor="carModel"
                        labelText="مدل خودرو"
                        placeholder="مثال: پژو 206"
                        value={carAddress?.carModel || ''}
                        onChange={handleCarModelChange}
                        className="bg-inherit"
                        inputClassName="text-xs!"

                    />
                    <InputField
                        htmlFor="carColor"
                        labelText="رنگ خودرو"
                        placeholder="مثال: سفید"
                        value={carAddress?.carColor || ''}
                        onChange={handleCarColorChange}
                        className="bg-inherit"
                        inputClassName="text-xs!"

                    />
                    <InputField
                        htmlFor="plateNumber"
                        labelText="شماره پلاک"
                        placeholder="مثال: 12ب34567"
                        value={carAddress?.plateNumber || ''}
                        onChange={handlePlateNumberChange}
                        className="bg-inherit"
                        inputClassName="text-xs!"
                    />
                </div>
            </div>
        </section>
    );
};
