import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  Typography,
} from "@material-tailwind/react";
import React from "react";

import { ROUTES } from "../constants/routes";
import { useCart } from "../hooks/useCart";
import useCustomRouter from "../hooks/useCustomRouter";
import { _useScopedI18n } from "../i18n/client";
import { useCartStore } from "../stores/cartStore";
import ButtonCustom from "./Button";

export function InactiveCartDialog({ handleOpen, open }) {
  const { refreshCart } = useCart();
  const { loading } = useCartStore();
  const { push } = useCustomRouter();
  const scopeT = _useScopedI18n("cart");

  return (
    <>
      <Dialog
        className="md:!w-[27rem] md:!max-w-[27rem] md:!min-w-[27rem]"
        open={open}
        handler={() => handleOpen(false)}
        size="xs"
        dismiss={{
          outsidePress: false,
        }}
      >
        <DialogHeader className="p-5 md:p-8 md:pb-0 flex items-center justify-center">
          <Typography
            variant="h2"
            className="text-xl font-semibold text-black-500"
          >
            {scopeT("cartInactive")}
          </Typography>
        </DialogHeader>
        <DialogBody className="p-5 md:p-8 flex justify-center">
          <Typography
            variant="paragraph"
            className="text-sm font-medium text-gray-500 text-center"
          >
            {scopeT("cartInactiveSummery")}
          </Typography>
        </DialogBody>
        <DialogFooter className="gap-4 justify-center p-5 md:p-8 md:pt-0">
          <ButtonCustom
            className="text-sm"
            icon={undefined}
            loading={loading}
            onClick={async () => {
              const result = await refreshCart.mutateAsync("validate");
              if (result) {
                handleOpen(false);
                push(`${ROUTES.dashboard.cart}?state=refresh`);
              }
            }}
          >
            {scopeT("cartInactiveAction")}
          </ButtonCustom>
        </DialogFooter>
      </Dialog>
    </>
  );
}
