// import AppLoadingComponent from "../AppLoadingComponent";
import {
  Dialog,
  DialogBody,
  DialogHeader,
  IconButton,
  Typography,
} from "@material-tailwind/react";
import React from "react";
import { IoRefresh } from "react-icons/io5";

import { _useScopedI18n } from "../../i18n/client";
import ButtonCustom from "../Button";
import LoadingIconComponent from "../LoadingIconComponent";

type RequestProcessingDialogProps = {
  open: boolean;
  orderId: string;
  paymentProcessFailed: boolean;
  onRetry?: () => void;
  setOpen: (value: boolean) => void;
  /** When set (e.g. NOWPayments deposit instructions), replaces the loading state in the same modal. */
  paymentDetails?: React.ReactNode;
};

export function RequestProcessingDialog({
  open,
  setOpen,
  orderId,
  paymentProcessFailed,
  onRetry,
  paymentDetails,
}: RequestProcessingDialogProps) {
  //
  const scopeT = _useScopedI18n("payment.requestProcessingDialog");
  const hasPaymentDetails = Boolean(paymentDetails);

  return (
    <>
      <Dialog
        open={open}
        size={hasPaymentDetails ? "md" : "xs"}
        handler={() => {}}
        className={`p-2 md:p-4 ${hasPaymentDetails ? "max-w-md w-[calc(100vw-1.5rem)]" : ""}`}
      >
        <DialogHeader className="p-0">
          <div className="text-right size-full">
            <IconButton
              color="blue-gray"
              size="sm"
              variant="text"
              onClick={() => {
                setOpen(false);
              }}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
                className="h-5 w-5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </IconButton>
          </div>
        </DialogHeader>
        <DialogBody
          className={
            hasPaymentDetails
              ? "flex max-h-[80vh] flex-col gap-3 overflow-y-auto px-1 text-left sm:px-2"
              : "flex flex-col items-center gap-8 text-center"
          }
        >
          {hasPaymentDetails ? (
            <>
              <div className="w-full space-y-1 text-center">
                <Typography
                  variant="h3"
                  className="text-xl font-semibold text-slate-900"
                >
                  {scopeT("completePaymentTitle")}
                </Typography>
                <p className="text-sm text-slate-500">
                  {scopeT("orderId")}{" "}
                  <span className="font-mono font-medium text-slate-700">
                    {orderId}
                  </span>
                </p>
              </div>

              {paymentDetails}

              {paymentProcessFailed ? (
                <div className="text-center">
                  <Typography
                    variant="lead"
                    className="mb-3 text-sm font-medium text-slate-500"
                  >
                    {scopeT("errorMsg")}
                  </Typography>

                  <ButtonCustom
                    icon={<IoRefresh className="size-4" />}
                    onClick={onRetry}
                  >
                    {scopeT("retryBtn")}
                  </ButtonCustom>
                </div>
              ) : null}
            </>
          ) : (
            <>
              <LoadingIconComponent />
              <div>
                {/* <AppLoadingComponent /> */}
                <Typography variant="h3" className="text-xl text-black-500">
                  {scopeT("title")}...
                </Typography>
              </div>

              <div className="rounded-lg border border-slate-100 bg-gray-50 px-9 py-4">
                <Typography
                  variant="h6"
                  className="text-xs font-medium leading-5 text-black-500"
                >
                  {scopeT("orderId")} : {orderId}
                </Typography>
              </div>

              <div>
                {paymentProcessFailed ? (
                  <>
                    <Typography
                      variant="lead"
                      className="mb-3 text-sm font-medium text-slate-500"
                    >
                      {scopeT("errorMsg")}
                    </Typography>

                    <ButtonCustom
                      icon={<IoRefresh className="size-4" />}
                      onClick={onRetry}
                    >
                      {scopeT("retryBtn")}
                    </ButtonCustom>
                  </>
                ) : (
                  <>
                    <Typography
                      variant="lead"
                      className="mb-3 text-sm font-medium text-slate-500"
                    >
                      {scopeT("subTitle")}
                    </Typography>

                    <Typography
                      variant="lead"
                      className="text-sm font-medium text-slate-500"
                    >
                      {scopeT("message")}
                    </Typography>
                  </>
                )}
              </div>
            </>
          )}
        </DialogBody>
      </Dialog>
    </>
  );
}
