/* eslint-disable @typescript-eslint/no-explicit-any */
import { ICity, IProvince } from "@/types/types";
import SelectBox from "@/components/elements/SelectBox";
import { useState, useEffect } from "react";
import useAxios from "@/hooks/useAxios";

interface LocationSelectorProps {
  formik: any;
}

const LocationSelector: React.FC<LocationSelectorProps> = ({ formik }) => {
  const { request } = useAxios();
  const [allStates, setAllStates] = useState<IProvince[] | null>(null);
  const [cities, setCities] = useState<ICity[] | null>(null);

  const fetchStates = async () => {
    try {
      const response = await request<{ provinces: IProvince[] }>(
        "GET",
        "/provinces"
      );
      setAllStates(response?.provinces || null);
    } catch (err) {
      console.log(err);
    }
  };

  const fetchCities = async (provinceId: string) => {
    try {
      const response = await request<{ cities: ICity[] }>(
        "GET",
        `/cities/${provinceId}`
      );
      setCities(response?.cities || []);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    fetchStates();
  }, []);

  useEffect(() => {
    if (formik.values.stateId) {
      fetchCities(formik.values.stateId);
    }
  }, [formik?.values?.stateId]);

  const handleProvinceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedProvinceId = e.target.value;
    formik.setFieldValue("stateId", selectedProvinceId);
    fetchCities(selectedProvinceId); // Fetch cities for the selected province
  };

  return (
    <>
      <SelectBox
        className={`${
          formik.touched.stateId && formik.errors.stateId
            ? "border-red-500 dark:border-red-500"
            : "border-gray-300"
        }`}
        value={formik.values.stateId}
        onChange={handleProvinceChange}
      >
        <option disabled value="">
          استان
        </option>
        {allStates?.map((item: IProvince) => (
          <option key={item.id} value={item.id}>
            {item?.name}
          </option>
        ))}
      </SelectBox>
      {formik.touched.stateId && formik.errors.stateId && (
        <small className="text-red-500 block text-center">
          {formik.errors.stateId}
        </small>
      )}

      <SelectBox
        className={`${
          formik.touched.cityId && formik.errors.cityId
            ? "border-red-500 dark:border-red-500"
            : "border-gray-300"
        }`}
        value={formik.values.cityId}
        onChange={(e) => formik.setFieldValue("cityId", e.target.value)}
      >
        <option disabled value="">
          شهر
        </option>
        {cities?.map((city: ICity) => (
          <option key={city.id} value={city.id}>
            {city.name}
          </option>
        ))}
      </SelectBox>
      {formik.touched.cityId && formik.errors.cityId && (
        <small className="text-red-500 block text-center">
          {formik.errors.cityId}
        </small>
      )}
    </>
  );
};

export default LocationSelector;
