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 { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
import { css, customElement, html, ifDefined, property, query, repeat, state, } from '../../../external/lit/index.js';
import { UmbLitElement } from '../../core/lit-element/index.js';
let UmbPreviewDeviceElement = class UmbPreviewDeviceElement extends UmbLitElement {
    // TODO: [LK] Eventually, convert these devices to be an  extension point.
    #devices;
    constructor() {
        super();
        // TODO: [LK] Eventually, convert these devices to be an  extension point.
        this.#devices = [
            {
                alias: 'fullsize',
                label: 'Fit browser',
                icon: 'icon-application-window-alt',
                dimensions: { height: '100%', width: '100%' },
            },
            {
                alias: 'desktop',
                label: 'Desktop',
                icon: 'icon-display',
                dimensions: { height: '1080px', width: '1920px' },
            },
            {
                alias: 'laptop',
                label: 'Laptop',
                icon: 'icon-laptop',
                dimensions: { height: '768px', width: '1366px' },
            },
            {
                alias: 'ipad-portrait',
                label: 'Tablet portrait',
                icon: 'icon-ipad',
                dimensions: { height: '929px', width: '769px' },
            },
            {
                alias: 'ipad-landscape',
                label: 'Tablet landscape',
                icon: 'icon-ipad',
                iconClass: 'flip',
                dimensions: { height: '675px', width: '1024px' },
            },
            {
                alias: 'smartphone-portrait',
                label: 'Smartphone portrait',
                icon: 'icon-iphone',
                dimensions: { height: '640px', width: '360px' },
            },
            {
                alias: 'smartphone-landscape',
                label: 'Smartphone landscape',
                icon: 'icon-iphone',
                iconClass: 'flip',
                dimensions: { height: '360px', width: '640px' },
            },
        ];
        this.device = this.#devices[0];
        this._popoverOpen = false;
        this.#onBlur = () => {
            if (this._popoverOpen) {
                this._popoverElement?.hidePopover();
            }
        };
        this.addEventListener('blur', this.#onBlur, true); // Use capture phase to catch blur events
    }
    connectedCallback() {
        super.connectedCallback();
        this.hidden = true;
        this.#loadDevices();
    }
    async #loadDevices() {
        // TODO: [LK] Eventually, load devices from extension points.
        this.hidden = false;
    }
    async #onClick(device) {
        if (device === this.device)
            return;
        this.device = device;
        const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
        await previewContext?.updateIFrame({
            wrapperClass: device.alias,
            height: device.dimensions.height,
            width: device.dimensions.width,
        });
        // Don't close popover for device selector - users often want to quickly test multiple devices
    }
    #onPopoverToggle(event) {
        this._popoverOpen = event.newState === 'open';
    }
    #onBlur;
    render() {
        return html `
			<uui-button look="primary" popovertarget="devices-popover">
				<div>
					<uui-icon name=${this.device.icon} class=${ifDefined(this.device.iconClass)}></uui-icon>
					<span>${this.device.label}</span>
				</div>
				<uui-symbol-expand slot="extra" id="expand-symbol" .open=${this._popoverOpen}></uui-symbol-expand>
			</uui-button>
			<uui-popover-container id="devices-popover" placement="top-end" @toggle=${this.#onPopoverToggle}>
				<umb-popover-layout>
					${repeat(this.#devices, (item) => item.alias, (item) => html `
							<uui-menu-item label=${item.label} ?active=${item === this.device} @click=${() => this.#onClick(item)}>
								<uui-icon slot="icon" name=${item.icon} class=${ifDefined(item.iconClass)}></uui-icon>
							</uui-menu-item>
						`)}
				</umb-popover-layout>
			</uui-popover-container>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: flex;
				border-left: 1px solid var(--uui-color-header-contrast);
				--uui-button-font-weight: 400;
				--uui-button-padding-left-factor: 3;
				--uui-button-padding-right-factor: 3;
				--uui-menu-item-flat-structure: 1;
			}

			:host([hidden]) {
				display: none;
			}

			#expand-symbol {
				transform: rotate(-90deg);
				margin-left: var(--uui-size-space-3, 9px);

				&[open] {
					transform: rotate(0deg);
				}
			}

			uui-button > div {
				display: flex;
				align-items: center;
				gap: var(--uui-size-2, 6px);
			}

			uui-icon.flip {
				transform: rotate(90deg);
			}

			umb-popover-layout {
				--uui-color-surface: var(--uui-color-header-surface);
				--uui-color-border: var(--uui-color-header-surface);
				color: var(--uui-color-header-contrast);
			}
		`,
    ]; }
};
__decorate([
    query('#devices-popover')
], UmbPreviewDeviceElement.prototype, "_popoverElement", void 0);
__decorate([
    property({ attribute: false, type: Object })
], UmbPreviewDeviceElement.prototype, "device", void 0);
__decorate([
    state()
], UmbPreviewDeviceElement.prototype, "_popoverOpen", void 0);
UmbPreviewDeviceElement = __decorate([
    customElement('umb-preview-device')
], UmbPreviewDeviceElement);
export { UmbPreviewDeviceElement };
export { UmbPreviewDeviceElement as element };
