import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
import { Button, CircularProgress } from "@mui/material";
import { useRouter } from "next/navigation";
import { clearFilterParams } from "@/helper";
import { useState } from "react";

function DeleteAllButton({ filter, sendReq, setFilter, handleClose }) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const resetFilter = () => {
    setLoading(true);
    clearFilterParams(router, [
      "category",
      "specialty",
      "active",
      "gender",
      "degree",
    ]);

    const newFilter = {
      ...filter,
      ...{
        category: undefined,
        specialty: undefined,
        active: 0,
        gender: "هر دو",
        degree: "همه موارد",
      },
    };
    sendReq(newFilter).finally(() => {
      setLoading(false);
      handleClose();
      setFilter(newFilter);
    });
  };

  return (
    <div className="flex justify-between w-full">
      <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
      <Button
        variant="text"
        disabled={loading}
        onClick={resetFilter}
        className="cursor-pointer !py-0 !px-2 flex items-center justify-center gap-1"
      >
        {loading ? (
          <CircularProgress className="!max-w-[17px] !max-h-[17px] !w-[17px] !h-[17px] !text-[#F17732]" />
        ) : (
          <CloseOrangeModal />
        )}
        <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
      </Button>
    </div>
  );
}

export default DeleteAllButton;