import { Host, h } from "@stencil/core";
import { closeDialog, dialogStore } from "../../store/dialog";
import { useTranslation } from "../../utils/utils";
import { deviceModeStore } from "../../store/store";
import { ZButton } from "../internal-component/z-button";
import { Icon } from "../internal-component/icon";
export class ZDialog {
    render() {
        const t = useTranslation();
        const dialog = dialogStore.dialog;
        if (!dialog.open)
            return null;
        const baseClasses = 'z-dialog';
        const boxClasses = `z-dialog-wrapper bg-background ${deviceModeStore.get('mode') === 'mobile' ? 'max-w-xs' : 'max-w-sm'} text-surface`;
        const overlayStyle = {
            zIndex: '2147483600',
        };
        const handleClose = () => {
            if (dialog.onCloseDialog)
                dialog.onCloseDialog();
            closeDialog();
        };
        const handleSubmit = () => {
            if (dialog.onSubmitDialog)
                dialog.onSubmitDialog();
            closeDialog();
        };
        return (h(Host, null, h("div", { class: baseClasses, style: overlayStyle }, h("div", { class: boxClasses }, dialog.displayCloseButton && (h("div", { class: "absolute right-4 top-4 cursor-pointer", onClick: () => handleClose() }, h(Icon, { name: "X", addClass: "size-4 text-surface" }))), dialog.type !== "DEFAULT" /* DIALOG_TYPE.DEFAULT */ && (h("div", { class: "mb-4" }, dialog.type === "SUCCESS" /* DIALOG_TYPE.SUCCESS */ && h(Icon, { name: "CircleCheck", addClass: "z-dialog-icon text-green-500" }), dialog.type === "INFO" /* DIALOG_TYPE.INFO */ && h(Icon, { name: "Info", addClass: "z-dialog-icon text-white" }), dialog.type === "WARNING" /* DIALOG_TYPE.WARNING */ && h(Icon, { name: "TriangleAlert", addClass: "z-dialog-icon text-yellow-500" }), dialog.type === "ERROR" /* DIALOG_TYPE.ERROR */ && h(Icon, { name: "X", addClass: "z-dialog-icon text-red-500" }), dialog.type === "CUSTOM" /* DIALOG_TYPE.CUSTOM */ && dialog.customSign)), dialog.title && h("h2", { class: "z-dialog-title" }, dialog.title), dialog.contentCustom && h("p", { class: "z-dialog-custom text-theme-gray" }, dialog.contentCustom), h("div", { class: "z-dialog-action-wrapper" }, (dialog.type === "WARNING" /* DIALOG_TYPE.WARNING */ || dialog.cancelButtonName) ? (h("div", { class: "z-dialog-action-box" }, h(ZButton, { variant: "outlined", label: dialog.cancelButtonName || t('cancel'), onClick: () => handleClose() }), h(ZButton, { label: dialog.buttonName || t('ok'), onClick: () => handleSubmit() }))) : (h(ZButton, { label: dialog.buttonName || t('ok'), onClick: () => handleSubmit() })))))));
    }
    static get is() { return "z-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["z-dialog.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["z-dialog.css"]
        };
    }
}
