// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { styleMap, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link DrawerElement}.
 *
 * @public
 */
export function drawerElementTemplate(e) {
    const setHost = (host, attribute, hasAttribute) => {
        if (hasAttribute) {
            RendererServiceLocator.current.setAttribute(host, attribute);
        }
        else {
            RendererServiceLocator.current.removeAttribute(host, attribute);
        }
        return hasAttribute;
    };
    const getSize = () => {
        const size = {
            height: undefined,
            width: undefined
        };
        switch (e.position) {
            case 'left':
            case 'right':
                size.height = '100%';
                size.width = typeof e.width === 'number' ? `${e.width}px` : e.width;
                if (e.isFullScreen) {
                    size.width = '100%';
                }
                break;
            case 'top':
            case 'bottom':
                size.height = typeof e.height === 'number' ? `${e.height}px` : e.height;
                size.width = '100%';
                if (e.isFullScreen) {
                    size.height = '100%';
                }
                break;
        }
        return size;
    };
    const style = {
        'width': getSize().width,
        'max-width': `min(${getSize().width}, 100vw)`,
        'min-height': getSize().height,
        'height': getSize().height
    };
    const hasCustomHeader = e.hasSlotContent('header');
    const hasHeaderContent = Boolean(e.header.trim() || e.subHeader.trim() || e.closeable);
    return html `
        ${when(e.hasBackdrop, () => html `
        <mosaik-backdrop part="backdrop"
                         ?hidden="${!e.isOpen}"
                         @click="${() => e.onBackdrop()}"></mosaik-backdrop>
        `)}
        <div part="root"
             style="${styleMap(style)}">
            ${when(e.hasShadow, () => html `
            <mosaik-elevation part="elevation"
                              .weigh="${e.elevation}"></mosaik-elevation>
            `)}

            <div part="header"
                 ?hidden="${!setHost(e, 'has-header', hasCustomHeader || hasHeaderContent)}">
                ${when(hasCustomHeader, () => html `
                <slot name="header"></slot>
                `, () => when(hasHeaderContent, () => html `
                <mosaik-drawer-header>
                    <mosaik-drawer-header-text slot="header"
                                               .text="${e.header.trim()}"
                                               .dir="${e.dir}"></mosaik-drawer-header-text>
                    <mosaik-drawer-header-sub-text slot="subHeader"
                                                   .text="${e.subHeader.trim()}"
                                                   .dir="${e.dir}"></mosaik-drawer-header-sub-text>
                    ${when(e.closeable, () => html `
                    <mosaik-dismiss slot="suffix"
                                    .appearance="${'plain'}"
                                    .size="${'small'}"
                                    @click="${() => e.close()}"></mosaik-dismiss>
                    `)}
                </mosaik-drawer-header>
                `))}
            </div>

            <div part="main">
                <slot></slot>
            </div>
            <div part="actions"
                 ?hidden="${!setHost(e, 'has-actions', e.hasSlotContent('actions'))}">
                <slot name="actions"></slot>
            </div>
            <div part="footer"
                 ?hidden="${!setHost(e, 'has-footer', e.hasSlotContent('footer'))}">
                <slot name="footer"></slot>
            </div>
        </div>
    `;
}
//# sourceMappingURL=DrawerElementTemplate.js.map