import React, { useEffect, useState } from "react";
import Modal from "../elements/Modal";
import { ICity, IProvince } from "@/types/types";
import useAxios from "@/hooks/useAxios";
import SelectBox from "../elements/SelectBox";

interface IFilterProps {
  setShowFilterModal: (e: boolean) => void;
  setStateId: (e: string) => void;
  setCityId: (e: string) => void;
  setRateFilter: (e: string) => void;
  setUserLevel: (e: string) => void;
  handleFilterChange: (e?: string) => void;
  showFilterModal: boolean;
  stateId: string;
  cityId: string;
  rateFilter: string;
  userLevel: string;
  clearFilters: () => void;
}

const levelList = [
  { name: "تازه وارد", id: "تازه وارد" },
  { name: "استاندارد", id: "استاندارد" },
  { name: "حرفه‌ای", id: "حرفه‌ای" },
  { name: "استاد", id: "استاد" },
];

function FilterModal({
  setStateId,
  setCityId,
  setRateFilter,
  setUserLevel,
  stateId,
  cityId,
  rateFilter,
  userLevel,
  setShowFilterModal,
  showFilterModal,
  handleFilterChange,
  clearFilters,
}: IFilterProps) {
  const { request } = useAxios();
  const [allStates, setAllStates] = useState<IProvince[] | null>(null);
  const [cities, setCities] = useState<ICity[] | null>(null);

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

  useEffect(() => {
    if (stateId) {
      const fetchCities = async () => {
        const response = await request<{ cities: ICity[] }>(
          "GET",
          `/cities/${stateId}`
        );
        setCities(response?.cities || []);
      };
      fetchCities();
    }
  }, [stateId]);

  return (
    <Modal
      isOpen={showFilterModal}
      onClose={() => setShowFilterModal(false)}
      height="500px"
    >
      <div className="flex flex-col items-center">
        <span className="font-semibold mb-5">مرتب سازی</span>
        <SelectBox
          className="mt-4 max-w-sm"
          value={stateId}
          onChange={(e) => setStateId(e.target.value)}
        >
          <option disabled value="">
            استان
          </option>
          {allStates?.map((item) => (
            <option key={item.id} value={item.id}>
              {item.name}
            </option>
          ))}
        </SelectBox>
        <SelectBox
          className="mt-4 max-w-sm"
          value={cityId}
          onChange={(e) => setCityId(e.target.value)}
        >
          <option disabled value="">
            شهر
          </option>
          {cities?.map((city) => (
            <option key={city.id} value={city.id}>
              {city.name}
            </option>
          ))}
        </SelectBox>
        <SelectBox
          className="mt-4 max-w-sm"
          value={userLevel}
          onChange={(e) => setUserLevel(e.target.value)}
        >
          <option disabled value="">
            سطح کاربر
          </option>
          {levelList.map((item) => (
            <option key={item.id} value={item.id}>
              {item.name}
            </option>
          ))}
        </SelectBox>
        <SelectBox
          className="mt-4 max-w-sm"
          value={rateFilter}
          onChange={(e) => setRateFilter(e.target.value)}
        >
          <option disabled value="">
            مرتب سازی بر اساس رتبه
          </option>
          <option value="بیشترین">بیشترین رتبه</option>
          <option value="کمترین">کمترین رتبه</option>
        </SelectBox>
        <button
          onClick={() => {
            handleFilterChange();
            setShowFilterModal(false);
          }}
          className={`border p-1 w-full rounded-full duration-300 max-w-[150px] mt-5`}
        >
          اعمال فیلتر
        </button>
        <button
          onClick={() => clearFilters()}
          className={`border p-1 w-full rounded-full duration-300 max-w-[150px] mt-5`}
        >
          پاک کردن
        </button>
      </div>
    </Modal>
  );
}

export default FilterModal;
