"use client";

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";
import { btnHeightMd, btnHeightSm, toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

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 { t } = useTranslation("common");
  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();
  }, [request]);

  useEffect(() => {
    const fetchCategories = async () => {
      const response = await request<{ categories: ICategory[] }>(
        "GET",
        "/advertising/categories"
      );
      setCategories(response?.categories || null);
    };
    fetchCategories();
  }, [request]);

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

  const discountActive = sort === "mostDiscount";

  return (
    <Modal
      isOpen={showFilterModal}
      onClose={() => setShowFilterModal(false)}
      height="500px"
    >
      <div className="flex flex-col items-center">
        <span className="mb-5 font-semibold">{t("billboards.filter.sortTitle")}</span>
        <SelectBox
          className="mt-4 max-w-sm"
          value={stateId}
          onChange={(e) => setStateId(e.target.value)}
        >
          <option disabled value="">
            {t("billboards.province")}
          </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="">
            {t("billboards.city")}
          </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="">
            {t("billboards.category")}
          </option>
          {categories?.map((cat: ICategory) => (
            <option key={cat._id} value={cat.title}>
              {cat.title}
            </option>
          ))}
        </SelectBox>
        <RoundedButton
          onClick={() => {
            if (discountActive) {
              setSort("");
            } else {
              setSort("mostDiscount");
            }
          }}
          className={cn(toggleBtnClass(discountActive), btnHeightSm, "mt-4 w-40")}
        >
          {t("billboards.filter.mostDiscount")}
        </RoundedButton>
        <RoundedButton
          variant="primary"
          onClick={() => {
            handleFilterChange();
            setShowFilterModal(false);
          }}
          className={cn(btnHeightMd, "mt-5 w-full max-w-[200px]")}
        >
          {t("billboards.filter.apply")}
        </RoundedButton>
        <RoundedButton
          onClick={() => clearFilters()}
          className={cn(btnHeightMd, "mt-3 w-full max-w-[200px]")}
        >
          {t("billboards.filter.clear")}
        </RoundedButton>
      </div>
    </Modal>
  );
}

export default FilterModal;
