import Button from "../../components/Button/Button";
import { Grid } from "../../components/Grid/Grid";
import { motion } from "framer-motion";
import { useApiMutation } from "../../utils/useApiRequest";
import { useToast } from "../../hooks/useToast";
import { useModalStore } from "../../context/zustand-store/appStore";

type Props = {
  item: any;
  getData?: () => void;
};

export const DeleteProduct = ({ item, getData }: Props) => {
  const showToast = useToast();
  const { closeModal } = useModalStore();

  const mutation = useApiMutation({
    api: `/product/web/api/v1/product/${item?.id}/`,
    method: "delete",
  });

  const onSubmit = async () => {
    try {
      await mutation.mutateAsync({});
      showToast("عملیات با موفقیت انجام شد", "success");

      closeModal();
      if (getData) {
        getData();
      }
    } catch {
      showToast("مشکلی پیش آمده است!", "error");
    }
  };

  return (
    <Grid container xs="full" column className="flex justify-start items-start">
      {" "}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
        className="w-full max-w-md p-4"
      >
        <Grid container className="flex-row space-y-0 space-x-4">
          <Button
            onClick={() => {
              onSubmit();
            }}
            fullWidth
            className="bg-[#eb5757] hover:bg-[#d44e4e] text-white py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
          >
            بله
          </Button>
          <Button
            onClick={() => closeModal()}
            fullWidth
            className="bg-gray-200 text-gray-700 hover:bg-gray-100 py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
          >
            خیر
          </Button>
        </Grid>
      </motion.div>
    </Grid>
  );
};
