/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { MessageBoxButtons } from '../../../Types/MessageBoxButtons';
import { Size } from '../../../Types/Size';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * The template of the `MessageBoxElement`.
 *
 * @public
 */
export function messageBoxElementTemplate(e) {
    return html `
        <style>
            :host {
                --dialog-width: ${e.width};
                --dialog-height: ${e.height};
                --dialog-max-width: min(${e.width}, 100vw);
                --dialog-max-height: min(${e.height}, 100vh);
            }
        </style>
        ${when(e.hasBackdrop, () => html `
        <mosaik-backdrop part="backdrop"
                         ?hidden="${!e.isOpen}"
                         @click="${() => e.onBackdrop()}"></mosaik-backdrop>
        `)}

        <dialog part="root"
                class="${classMap({ dragging: e.dragging })}"
                open="${e.isOpen}">
            <mosaik-elevation part="elevation"
                              .weigh="${e.elevation}"
                              @connected="${(evt) => evt.target.attach(e)}"></mosaik-elevation>
            <div part="header">
                ${when(e.header, () => html `
                <mosaik-text part="headerText"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             .text="${e.header}"
                             .formatter="${e.formatter}"
                             .wrap="${true}"></mosaik-text>
                `)}
                ${when(e.subHeader, () => html `
                <mosaik-text part="subHeaderText"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             .text="${e.subHeader}"
                             .formatter="${e.formatter}"
                             .wrap="${true}"></mosaik-text>
                `)}
            </div>
            <div part="content">
                ${when(e.icon, () => html `
                <mosaik-icon part="icon"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             .size="${Size.Large}"
                             .data="${e.icon}"></mosaik-icon>
                `)}
                ${when(e.message, () => html `
                <mosaik-text part="message"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             .text="${e.message}"
                             .formatter="${e.formatter}"
                             .wrap="${true}"></mosaik-text>
                `)}
            </div>
            <div part="actions">
                ${when(e.buttons === MessageBoxButtons.OK, () => html `
                <mosaik-button part="action ok"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.okLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Solid}"
                               @click="${() => e.onDialogResult('ok')}"></mosaik-button>
                `)}
                ${when(e.buttons === MessageBoxButtons.OKCancel, () => html `
                <mosaik-button part="action ok"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.okLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Solid}"
                               @click="${() => e.onDialogResult('ok')}"></mosaik-button>
                <mosaik-button part="action cancel"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.cancelLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Plain}"
                               @click="${() => e.onDialogResult('cancel')}"></mosaik-button>
                `)}
                ${when(e.buttons === MessageBoxButtons.YesNo, () => html `
                <mosaik-button part="action yes"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.yesLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Solid}"
                               @click="${() => e.onDialogResult('yes')}"></mosaik-button>
                <mosaik-button part="action no"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.noLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Plain}"
                               @click="${() => e.onDialogResult('no')}"></mosaik-button>
                `)}
                ${when(e.buttons === MessageBoxButtons.YesNoCancel, () => html `
                <mosaik-button part="action yes"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.yesLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Solid}"
                               @click="${() => e.onDialogResult('yes')}"></mosaik-button>
                <mosaik-button part="action no"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.noLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Plain}"
                               @click="${() => e.onDialogResult('no')}"></mosaik-button>
                <mosaik-button part="action cancel"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${e.intl.cancelLabel}"
                               .variant="${Variant.Primary}"
                               .appearance="${Appearance.Plain}"
                               @click="${() => e.onDialogResult('cancel')}"></mosaik-button>
                `)}
            </div>
        </dialog>
    `;
}
//# sourceMappingURL=MessageBoxElementTemplate.js.map