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

function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose, setPage  }) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  
  const resetFilter = async() => {
   try{
     setLoading(true);
    clearDoctorClinicParams(router,slug, [
      "category",
      "specialty",
      "active",
      "gender",
      "degree",
      "page"
    ]);

    const newFilter = {
      ...filter,
      ...{
        category: undefined,
        specialty: undefined,
        active: 0,
        gender: "هر دو",
        degree: "همه موارد",
      },
    };
     const res = await sendReq({ ...newFilter});
      setFilter(newFilter);
      setPage(1);
      handleClose(false);
   }catch (err) {
      console.error("❌ خطا در ریست فیلترها:", err);
    } finally {
      setLoading(false);
    }
  };

  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;
