"use client";

import React from "react";
import Modal from "@/components/elements/Modal";
import SelectBox from "@/components/elements/SelectBox";
import { useTranslation } from "react-i18next";

interface IFilterProps {
  statusFiler: string;
  setStatusFiler: (e: string) => void;
  setShowFilterModal: (e: boolean) => void;
  showFilterModal: boolean;
  clearFilters: () => void;
  refetch: () => void;
}

const STATUS_VALUES = [
  "pre_payment",
  "paid",
  "accepted",
  "rejected",
  "expired",
] as const;

function FilterModal({
  setShowFilterModal,
  showFilterModal,
  clearFilters,
  statusFiler,
  setStatusFiler,
  refetch,
}: IFilterProps) {
  const { t } = useTranslation("common");

  return (
    <Modal
      isOpen={showFilterModal}
      onClose={() => setShowFilterModal(false)}
      height="370px"
    >
      <div className="flex flex-col items-center">
        <span className="font-semibold mb-5">
          {t("settings.billboards.filterTitle")}
        </span>
        <SelectBox
          className="mt-4 max-w-sm"
          value={statusFiler}
          onChange={(e) => setStatusFiler(e.target.value)}
        >
          <option value="">{t("settings.billboards.filterStatus")}</option>
          {STATUS_VALUES.map((value) => (
            <option key={value} value={value}>
              {t(`settings.billboards.status.${value}`)}
            </option>
          ))}
        </SelectBox>
        <button
          onClick={() => {
            refetch();
            setShowFilterModal(false);
          }}
          className={`border p-1 w-full rounded-full duration-300 max-w-[150px] mt-8`}
        >
          {t("settings.billboards.applyFilter")}
        </button>
        <button
          onClick={() => clearFilters()}
          className={`border p-1 w-full rounded-full duration-300 max-w-[150px] mt-5`}
        >
          {t("settings.billboards.clearFilter")}
        </button>
      </div>
    </Modal>
  );
}

export default FilterModal;
