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

interface IFilterProps {
  setShowFilterModal: (e: boolean) => void;
  setStateId: (e: string) => void;
  setCityId: (e: string) => void;
  setSort: (e: string) => void;
  setCategory: (e: string) => void;
  handleFilterChange: (e?: string) => void;
  showFilterModal: boolean;
  stateId: string;
  cityId: string;
  sort: string;
  category: string;
  clearFilters: () => void;
}
interface ICategory {
  title: string;
  _id: string;
  status: boolean;
}

function FilterModal({
  setStateId,
  setCityId,
  setCategory,
  setSort,
  stateId,
  cityId,
  category,
  sort,
  setShowFilterModal,
  showFilterModal,
  handleFilterChange,
  clearFilters,
}: IFilterProps) {
  const { request } = useAxios();
  const [allStates, setAllStates] = useState<IProvince[] | null>(null);
  const [cities, setCities] = useState<ICity[] | null>(null);
  const [categories, setCategories] = useState<ICategory[] | null>(null);
  useEffect(() => {
    const fetchStates = async () => {
      const response = await request<{ provinces: IProvince[] }>(
        "GET",
        "/provinces"
      );
      setAllStates(response?.provinces || null);
    };
    fetchStates();
  }, []);
  useEffect(() => {
    const fetchCategories = async () => {
      const response = await request<{ categories: ICategory[] }>(
        "GET",
        "/advertising/categories"
      );
      setCategories(response?.categories || null);
    };
    fetchCategories();
  }, []);

  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={category}
          onChange={(e) => setCategory(e.target.value)}
        >
          <option disabled value="">
            دسته بندی
          </option>
          {categories?.map((cat: ICategory) => (
            <option key={cat._id} value={cat.title}>
              {cat.title}
            </option>
          ))}
        </SelectBox>
        <RoundedButton
          onClick={() => {
            if (sort !== "mostDiscount") {
              setSort("mostDiscount");
            } else {
              setSort("");
            }
          }}
          className={`h-9 w-40 mt-4 ${
            sort && sort == "mostDiscount" ? "bg-[#23bace]" : ""
          }`}
        >
          بیشترین تخفیف
        </RoundedButton>
        <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;
