import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  IconButton,
  Typography,
} from "@material-tailwind/react";
import Link from "next/link";
import React from "react";
import { IoIosCloseCircleOutline } from "react-icons/io";

import ButtonCustom from "./Button";

export function PickupDialog({
  handleOpen,
  open,
  proceedToPayment,
  isLoading,
}) {
  return (
    <>
      <Dialog
        size="xs"
        open={open}
        handler={handleOpen}
        className="px-3 py-4 max-xs:px-0"
      >
        <DialogHeader className="justify-center pt-5 max-xs:px-0">
          <Typography
            variant="h2"
            className="text-xl max-xs:text-[13px] mt-5 font-semibold text-black-500 mb-0 whitespace-nowrap overflow-hidden"
          >
            ⬆️ Pick-Up Confirmation Required ⬆️
          </Typography>
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3 top-3 outline-none"
            onClick={async () => {
              handleOpen(false);
            }}
          >
            <IoIosCloseCircleOutline className="w-6 h-6 text-gray-500 cursor-pointer" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="">
          <Typography
            variant="h6"
            className="text-sm max-xs:text-[12px] font-semibold leading-6 text-black-400 text-center"
          >
            Thank you for choosing the Pick-Up Option!
          </Typography>
          <Typography
            variant="h6"
            className="text-sm max-xs:text-[12px] font-semibold leading-6 text-black-400 text-center"
          >
            To schedule your Pick-Up, please Contact the Horys Technologies Team
            at:{" "}
            <Link
              className="text-purple-500"
              href="https://support.hmall.shop"
              target="_blank"
            >
              {" "}
              HMall Support
            </Link>
          </Typography>
          <Typography
            variant="h6"
            className="text-sm max-xs:text-[12px] font-semibold leading-6 text-black-400 text-center"
          >
            Your order will be ready once the Pick-Up is Confirmed. 🚀
          </Typography>
        </DialogBody>
        <DialogFooter className="justify-center">
          <ButtonCustom
            icon={""}
            loading={isLoading}
            disabled={isLoading}
            className={""}
            onClick={async () => {
              await proceedToPayment();
            }}
          >
            Continue
          </ButtonCustom>
        </DialogFooter>
      </Dialog>
    </>
  );
}
