var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbTextStyles } from '../../style/index.js';
import { css, html, LitElement, nothing, customElement, property, state, query, } from '../../../../external/lit/index.js';
//TODO: Add the following attributes to JSDocs: header-transparent, main-no-padding, header-no-padding, header-fit-height
/**
 * @element umb-body-layout
 * @description Layout element to arrange elements in a body layout. A general layout for most views.
 * @slot - Slot for main content
 * @slot icon - Slot for icon
 * @slot name - Slot for name
 * @slot header - Slot for header element
 * @slot footer - Slot for footer element
 * @slot footer-info - Slot for info in the footer
 * @slot actions - Slot for actions in the footer
 * @slot default - slot for main content
 * @class UmbBodyLayout
 * @augments {UmbLitElement}
 */
let UmbBodyLayoutElement = class UmbBodyLayoutElement extends LitElement {
    constructor() {
        super(...arguments);
        this.headline = '';
        this.headerTransparent = false;
        this.loading = false;
        this._headerSlotHasChildren = false;
        this._navigationSlotHasChildren = false;
        this._actionsMenuSlotHasChildren = false;
        this._footerSlotHasChildren = false;
        this._actionsSlotHasChildren = false;
        this.#hasNodes = (e) => {
            return e.target.assignedNodes({ flatten: true }).length > 0;
        };
        this.#onScroll = () => {
            if (!this._scrollContainer)
                return;
            this.toggleAttribute('scrolling', this._scrollContainer.scrollTop > 0);
        };
    }
    #hasNodes;
    connectedCallback() {
        super.connectedCallback();
        if (this.headerTransparent) {
            requestAnimationFrame(() => {
                this._scrollContainer?.addEventListener('scroll', this.#onScroll);
            });
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._scrollContainer?.removeEventListener('scroll', this.#onScroll);
    }
    #onScroll;
    #setSlotVisibility(target, hasChildren) {
        target.style.display = hasChildren ? 'flex' : 'none';
    }
    render() {
        return html `
			<div
				id="header"
				style="display: ${this.headline ||
            this._headerSlotHasChildren ||
            this._actionsMenuSlotHasChildren ||
            this._navigationSlotHasChildren
            ? ''
            : 'none'}">
				${this.headline ? html `<h3 id="headline" title=${this.headline}>${this.headline}</h3>` : nothing}

				<slot
					id="header-slot"
					name="header"
					@slotchange=${(e) => {
            this._headerSlotHasChildren = this.#hasNodes(e);
            this.#setSlotVisibility(e.target, this._headerSlotHasChildren);
        }}></slot>
				<slot
					id="action-menu-slot"
					name="action-menu"
					@slotchange=${(e) => {
            this._actionsMenuSlotHasChildren = this.#hasNodes(e);
            this.#setSlotVisibility(e.target, this._actionsMenuSlotHasChildren);
        }}></slot>
				<slot
					id="navigation-slot"
					name="navigation"
					@slotchange=${(e) => {
            this._navigationSlotHasChildren = this.#hasNodes(e);
            this.#setSlotVisibility(e.target, this._navigationSlotHasChildren);
        }}></slot>
			</div>

			<!-- This div should be changed for the uui-scroll-container when it gets updated -->
			<div id="main">
				${this.loading ? html `<uui-loader-bar></uui-loader-bar>` : nothing}
				<slot></slot>
			</div>

			<slot name="footer"></slot>
			<umb-footer-layout style="display:${this._footerSlotHasChildren || this._actionsSlotHasChildren ? '' : 'none'}">
				<slot
					name="footer-info"
					@slotchange=${(e) => {
            this._footerSlotHasChildren = this.#hasNodes(e);
        }}></slot>
				<slot
					name="actions"
					slot="actions"
					@slotchange=${(e) => {
            this._actionsSlotHasChildren = this.#hasNodes(e);
        }}></slot>
			</umb-footer-layout>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: flex;
				background-color: var(--umb-body-layout-color-background, var(--uui-color-background));
				width: 100%;
				height: 100%;
				flex-direction: column;
			}

			#header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: var(--umb-header-layout-height);
				background-color: var(--uui-color-surface);
				border-bottom: 1px solid var(--uui-color-border);
				box-sizing: border-box;
				z-index: 1;
			}
			:host([header-transparent]) #header {
				background-color: transparent;
				border-color: transparent;
				transition: box-shadow 150ms ease-in-out;
				clip-path: inset(0px -15px -15px -15px);
			}
			:host([header-transparent][scrolling]) #header {
				/* This should be using the uui-shadows but for now they are too drastic for this use case */
				box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
			}
			:host([header-fit-height][header-transparent]:not([header-no-padding])) #header-slot {
				padding: var(--uui-size-layout-1);
			}
			:host([header-fit-height]) #header {
				height: fit-content;
			}
			#header-slot {
				padding: 0 var(--uui-size-layout-1);
				flex-grow: 1;
			}
			:host([header-no-padding]) #header-slot {
				padding: 0;
			}

			:host([header-transparent]:not([main-no-padding])) #main:not(*[style='display: none'] + *) {
				/* The following styling is only applied if the clear-header IS present,
				the main-no-padding attribute is NOT present, and the header is NOT hidden */
				padding-top: var(--uui-size-space-2);
			}
			:host([main-no-padding]) #main {
				padding: 0;
			}

			#header-slot,
			#action-menu-slot,
			#navigation-slot {
				display: none;
				height: 100%;
				align-items: center;
				box-sizing: border-box;
				min-width: 0;
				flex-shrink: 0;
			}
			#navigation-slot {
				margin-left: auto;
			}

			#headline {
				display: block;
				margin: 0 var(--uui-size-layout-1);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				min-width: 0;
			}

			#main {
				display: block;
				flex: 1;
				flex-direction: column;
				overflow-y: auto;
				padding: var(--uui-size-layout-1);
			}

			#main > slot::slotted(*:first-child) {
				padding-top: 0;
				margin-top: 0;
			}
		`,
    ]; }
};
__decorate([
    query('#main')
], UmbBodyLayoutElement.prototype, "_scrollContainer", void 0);
__decorate([
    property()
], UmbBodyLayoutElement.prototype, "headline", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'header-transparent' })
], UmbBodyLayoutElement.prototype, "headerTransparent", void 0);
__decorate([
    property({ type: Boolean })
], UmbBodyLayoutElement.prototype, "loading", void 0);
__decorate([
    state()
], UmbBodyLayoutElement.prototype, "_headerSlotHasChildren", void 0);
__decorate([
    state()
], UmbBodyLayoutElement.prototype, "_navigationSlotHasChildren", void 0);
__decorate([
    state()
], UmbBodyLayoutElement.prototype, "_actionsMenuSlotHasChildren", void 0);
__decorate([
    state()
], UmbBodyLayoutElement.prototype, "_footerSlotHasChildren", void 0);
__decorate([
    state()
], UmbBodyLayoutElement.prototype, "_actionsSlotHasChildren", void 0);
UmbBodyLayoutElement = __decorate([
    customElement('umb-body-layout')
], UmbBodyLayoutElement);
export { UmbBodyLayoutElement };
