import React from "react";
import Modal from "../elements/Modal";
import RoundedButton from "../elements/RoundedButton";

interface IFilterProps {
  setShowFilterModal: (e: boolean) => void;
  setFilterRequestsPrice: (e: string) => void;
  setFilterAge: (e: string) => void;
  setFilterGender: (e: string) => void;
  handleFilterChange: (e?: string) => void;
  clearFilters: () => void;
  showFilterModal: boolean;
  filterRequestsPrice: string;
  filterAge: string;
  filterGender: string;
}

const FilterModal = ({
  setShowFilterModal,
  showFilterModal,
  setFilterRequestsPrice,
  setFilterAge,
  setFilterGender,
  filterRequestsPrice,
  filterAge,
  filterGender,
  handleFilterChange,
  clearFilters,
}: IFilterProps) => {
  return (
    <Modal
      isOpen={showFilterModal}
      onClose={() => setShowFilterModal(false)}
      height="520px"
    >
      <div className="flex flex-col items-center max-w-md mx-auto pb-16">
        <span className="font-semibold mb-5">مرتب سازی</span>
        <div className="grid grid-cols-2 w-full gap-4 my-5">
          <RoundedButton
            onClick={() => setFilterRequestsPrice("request")}
            className={`w-full h-9 ${filterRequestsPrice === "request" ? "bg-[#23bace]" : ""}`}
          >
            بیشترین پیشنهاد
          </RoundedButton>
          <RoundedButton
            onClick={() => setFilterRequestsPrice("price")}
            className={`w-full h-9 ${filterRequestsPrice === "price" ? "bg-[#23bace]" : ""}`}
          >
            بیشترین بودجه
          </RoundedButton>
        </div>
        <span className="font-semibold mb-2">سن</span>
        <div className="grid grid-cols-3 w-full gap-4 mb-5">
          <RoundedButton
            onClick={() => setFilterAge("all")}
            className={`w-full h-9 ${filterAge === "all" ? "bg-[#23bace]" : ""}`}
          >
            بدون محدودیت
          </RoundedButton>
          <RoundedButton
            onClick={() => setFilterAge("old")}
            className={`w-full h-9 ${filterAge === "old" ? "bg-[#23bace]" : ""}`}
          >
            25-30
          </RoundedButton>
          <RoundedButton
            onClick={() => setFilterAge("18-25")}
            className={`w-full h-9 ${filterAge === "18-25" ? "bg-[#23bace]" : ""}`}
          >
            18-25
          </RoundedButton>
        </div>
        <span className="font-semibold mb-2">جنسیت</span>
        <div className="grid grid-cols-2 w-full gap-4 mb-5">
          <RoundedButton
            onClick={() => setFilterGender("male")}
            className={`w-full h-9 ${filterGender === "male" ? "bg-[#23bace]" : ""}`}
          >
            مرد
          </RoundedButton>
          <RoundedButton
            onClick={() => setFilterGender("female")}
            className={`w-full h-9 ${filterGender === "female" ? "bg-[#23bace]" : ""}`}
          >
            زن
          </RoundedButton>
        </div>

        <RoundedButton
          onClick={() => {
            handleFilterChange();
            setShowFilterModal(false);
          }}
          className="border h-10 w-full rounded-full mt-5"
        >
          اعمال فیلتر
        </RoundedButton>

        <RoundedButton
          onClick={() => clearFilters()}
          className="border h-10 w-full rounded-full mt-5"
        >
          پاک کردن
        </RoundedButton>
      </div>
    </Modal>
  );
};

export default FilterModal;
