import React from "react";
import Modal from "@/components/elements/Modal";
import SelectBox from "@/components/elements/SelectBox";

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

const statusList = [
  { value: "pre_payment", label: "پرداخت نشده" },
  { value: "paid", label: "در انتظار تایید" },
  { value: "accepted", label: "منتشر شده" },
  { value: "rejected", label: "رد شده" },
  { value: "expired", label: "منقضی شده" },
];

function FilterModal({
  setShowFilterModal,
  showFilterModal,
  clearFilters,
  statusFiler,
  setStatusFiler,
  refetch,
}: IFilterProps) {
  return (
    <Modal
      isOpen={showFilterModal}
      onClose={() => setShowFilterModal(false)}
      height="370px"
    >
      <div className="flex flex-col items-center">
        <span className="font-semibold mb-5">مرتب سازی</span>
        <SelectBox
          className="mt-4 max-w-sm"
          value={statusFiler}
          onChange={(e) => setStatusFiler(e.target.value)}
        >
          <option value="">وضعیت</option>
          {statusList?.map((item) => (
            <option key={item.value} value={item.value}>
              {item.label}
            </option>
          ))}
        </SelectBox>
        <button
          onClick={() => {
            refetch();
            setShowFilterModal(false);
          }}
          className={`border p-1 w-full rounded-full duration-300 max-w-[150px] mt-8`}
        >
          اعمال فیلتر
        </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;
