'use client'
import { useWebContext } from '@/app/(site)/providers';
import { FaRegCompass } from "react-icons/fa6";
import { useEffect, useState } from 'react';
import { useCredentialContext } from '@/hooks/credenciado';


export default function ModalStates({ isOpen, onClose }: { isOpen: boolean; onClose: () => void; }) {
    const [stateId, setStateId] = useState<string>('');
    const { dataStates } = useWebContext();
    const { setCityesId } = useCredentialContext();

    const handleStateChange = () => {
        let newStates = dataStates.find((item) => item.Id == stateId);
        localStorage.setItem('EstadosId', stateId);
        localStorage.setItem('Estados', newStates?.Nome ?? '');
        localStorage.setItem('UF', newStates?.UF ?? '');
        localStorage.removeItem('CidadesId');
        localStorage.removeItem('Cidade');

        window.location.reload()
    };

    useEffect(() => {
        const storedStateId = localStorage.getItem('EstadosId');
        if (storedStateId) {
            setStateId(storedStateId);
        }
    }, []);

    const getUserLocation = () => {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            (position) => {
              const { latitude, longitude } = position.coords;
            },
            (err) => {
            }
          );
        } else {
        }
      };

    if (!isOpen) return null;

    return (
        <div className="inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 fixed z-[999999] font-poppins">
            <div className="bg-white rounded-[30px] p-6 shadow-lg w-[420px] h-[314px]">

                <div className="flex justify-end">
                    <button onClick={onClose} className="text-gray-700 hover:text-gray-900 text-[30px]">
                        &times;
                    </button>
                </div>

                <div className='p-6 pt-4'>
                    <h2 className="text-sm font-bold mb-3 text-[#24404C]">Informe o estado que você está.</h2>
                    <div className="mb-4">
                        <select
                            className="w-full max-w-xs border rounded-md px-3 py-2 h-[56px]"
                            value={stateId}
                            name='state'
                            onChange={({target}) => setStateId(target.value)}
                        >
                            <option>Estado</option>
                            {!!dataStates &&
                                Object.values(dataStates).map((item) => (
                                    <option className='max-w-[100px]' value={item.Id} key={item.Id}>
                                        {item.UF}
                                    </option>
                                ))}
                        </select>

                        <button className='mt-3 text-[--primary] text-[14px]' onClick={getUserLocation}>
                            <FaRegCompass size={20} className='me-3 inline' /> Usar minha localização
                        </button>
                    </div>

                    <button className='w-full font-medium border rounded-lg px-3 py-2 bg-[--primary] text-[16px] text-white h-[54px]' type='button' onClick={() => handleStateChange()}>
                        Filtrar
                    </button>
                </div>
            </div>
        </div>
    );
};