"use client";
import { useEffect, useState } from "react";
const states=["AC","AL","AP","AM","BA","CE","DF","ES","GO","MA","MT","MS","MG","PA","PB","PR","PE","PI","RJ","RN","RS","RO","RR","SC","SP","SE","TO"];
type City={id:number;nome:string};
export function StateCityFields({initialState="PR",initialCity="",prefix="location"}:{initialState?:string;initialCity?:string;prefix?:string}){const [state,setState]=useState(initialState.toUpperCase());const [city,setCity]=useState(initialCity);const [cities,setCities]=useState<City[]>([]);const [loading,setLoading]=useState(true);useEffect(()=>{let active=true;fetch(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${state}/municipios?orderBy=nome`).then(r=>r.ok?r.json():Promise.reject()).then((data:City[])=>{if(active)setCities(data)}).catch(()=>{if(active)setCities(initialCity?[{id:0,nome:initialCity}]:[])}).finally(()=>{if(active)setLoading(false)});return()=>{active=false}},[state,initialCity]);return <div className="form-grid two"><label>Estado<select name="state" value={state} onChange={e=>{setLoading(true);setCity("");setState(e.target.value)}} id={`${prefix}-state`} required>{states.map(uf=><option value={uf} key={uf}>{uf}</option>)}</select></label><label>Cidade<select name="city" value={cities.some(item=>item.nome===city)?city:""} onChange={e=>setCity(e.target.value)} id={`${prefix}-city`} required disabled={loading}><option value="">{loading?"Carregando cidades...":"Selecione a cidade"}</option>{cities.map(item=><option value={item.nome} key={item.id||item.nome}>{item.nome}</option>)}</select></label></div>}