import {
  load,
  countryProps,
  stateProps,
  cityProps,
  useCSCProps,
  loadCountrys,
  loadStates,
  loadCitys,
  useCSC,
} from "country-state-city-nextjs/cjs/index";

  const [CSC, setCSC] = useState<{
    countrys: countryProps[];
    states: stateProps[];
    citys: cityProps[];
  }>({
    countrys: [],
    states: [],
    citys: [],
  });
  const loadCSC = async () => {
    const countrys: countryProps[] = await loadCountrys();
    const states: stateProps[] = await loadStates();
    const citys: cityProps[] = await loadCitys();
    setCSC({
      countrys,
      states,
      citys,
    });
  };
  useEffect(() => {
    loadCSC();
  }, []);

const {
  load, //is load all countrys, states and citys
  countrySelected, //current country selected
  stateSelected, //current state selected
  citySelected, //current city selected
  countrys, //all countrys
  states, //all states
  citys, //all citys
  onChangeCSC, //object of functions for change selected country, state and city
  statesForCountrySelected // all states of countrySelected
  citysForStateSelected // all citys of stateSelected
} = useCSC({
  //(Optional)
  defaultCountry: {
    id: 82,
    text: "Colombia",
  },
  //(Optional)
  defaultState: {
    id: 1700,
    id_country: 82,
    text: "Antioquia",
  },
  //(Optional)
  defaultCity: {
    id: 465167,
    id_state: 1700,
    text: "Medellín",
  },
});

// change country; state and city change to null
onChangeCSC.country({
  id: 95,
  text: "Venezuela",
});
// change state; city change to null
// if countrySelected is null onChangeCSC.state not change state
onChangeCSC.state({
  id: 1861,
  id_country: 95,
  text: "Táchira",
});
// change city
// if stateSelected is null onChangeCSC.city not change city
onChangeCSC.city({
  id: 590202,
  id_state: 1861,
  text: "Peracal",
});