/* eslint-disable @typescript-eslint/no-explicit-any */
import { BaseProps } from "../../Factory/BaseType";
import { Dialog } from "@progress/kendo-react-dialogs";
import FactoryRenderer from "../../Renderer";
import ConfirmationIllustration from "./ConfirmationIllustration";

type ConfirmationAlertViewProps = BaseProps & {
  messageHeader?: string;
  messageBody?: string;
  iconUrl?: string;
  iconName?: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm: () => void;
  onCancel: () => void;
};

const ConfirmationAlertView = (props: ConfirmationAlertViewProps) => {
  return (
    <Dialog
      id={props.widgetStyle?.id || ""}
      className={`tmpl-confirmation-dialog ${
        props.widgetStyle?.className || ""
      }`}
      data-prc-col-important={(props.widgetStyle as any)?.important ? props.widgetStyle?.className || undefined : undefined}
      style={props.widgetStyle?.inline || {}}
      onClose={props.onCancel}
    >
      <div className="tmpl-dialog-box-container">
        <div className="tmpl-dialog-box__icon-wrapper">
          {props.iconUrl ? (
            <img
              src={props.iconUrl}
              alt=""
              className="tmpl-dialog-box__icon-image"
              draggable={false}
            />
          ) : props.iconName ? (
            <FactoryRenderer
              name={props.iconName}
              uiElementType="WIDGET"
              widgetType="ICON"
              fillMode="clear"
              title=""
            />
          ) : (
            <ConfirmationIllustration />
          )}
        </div>
        <h4 className="tmpl-dialog-box__header">{props.messageHeader}</h4>
        {props.messageBody ? (
          <div className="tmpl-dialog-box__body">
            <p>{props.messageBody}</p>
          </div>
        ) : null}
        <div className="tmpl-dialog-box__footer">
          <FactoryRenderer
            widgetStyle={{ className: "qo-btn qo-btn-primary qo-btn-md tmpl-confirm-btn--confirm" }}
            themeColor="primary"
            onClick={props.onConfirm}
            title={props.confirmText ?? "Yes"}
            uiElementType="WIDGET"
            widgetType="BUTTON"
          />
          <FactoryRenderer
            widgetStyle={{ className: "qo-btn qo-btn-default qo-btn-md tmpl-confirm-btn--cancel" }}
            onClick={props.onCancel}
            title={props.cancelText ?? "No"}
            uiElementType="WIDGET"
            widgetType="BUTTON"
          />
        </div>
      </div>
    </Dialog>
  );
};
export default ConfirmationAlertView;