/* eslint-disable @typescript-eslint/no-explicit-any */
import { BaseProps } from "../../Factory/BaseType";
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 (
    // The DIALOG widget owns the styling host: it renders id / className /
    // data-prc-col-important / inline on one element *inside* the dialog
    // content, which is what travels with Kendo's portal. `title` stays unset —
    // passing it would make Kendo render a titlebar this alert never had, and
    // the close affordance is the footer button, not a titlebar icon.
    <FactoryRenderer
      uiElementType="WIDGET"
      widgetType="DIALOG"
      widgetStyle={{
        ...props.widgetStyle,
        className: `tmpl-confirmation-dialog ${
          props.widgetStyle?.className || ""
        }`,
      }}
      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 tmpl-button 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 tmpl-button tmpl-confirm-btn--cancel" }}
            onClick={props.onCancel}
            title={props.cancelText ?? "No"}
            uiElementType="WIDGET"
            widgetType="BUTTON"
          />
        </div>
      </div>
    </FactoryRenderer>
  );
};
export default ConfirmationAlertView;