import { r as registerInstance, h, a as Host, g as getElement } from './index-55463a54.js';
import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './ui-store-76bb0e8e.js';
import { d as defaultGridSize } from './grid-a3ca5a3e.js';
import { R as Render } from './index-3f51790f.js';
import { S as SyncWithStore } from './index-dafb4b7f.js';

const rtkSpotlightGridCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:100%;width:100%}main{flex:1 1 0%}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}:host([size='sm']),:host([size='md']){flex-direction:column}:host([size='md']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='md']) .grid-width-sm{height:25%}:host([size='md']) .grid-width-md{height:50%}:host([size='md']) .grid-width-lg{height:66.666667%}:host([size='sm']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='sm']) .grid-width-sm,:host([size='sm']) .grid-width-md,:host([size='sm']) .grid-width-lg{height:50%}:host([size='xl']) .grid-width-sm,:host([size='xl']) .grid-width-md,:host([size='xl']) .grid-width-lg{width:400px}:host([layout='column']){flex-direction:column}:host([layout='column']) main{flex:4}:host([layout='column']) aside{flex:2;max-width:100%;width:100%}";
const RtkSpotlightGridStyle0 = rtkSpotlightGridCss;

var __decorate = (undefined && undefined.__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;
};
const RtkSpotlightGrid = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Grid Layout */
        this.layout = 'row';
        /** Participants */
        this.participants = [];
        /** Pinned Participants */
        this.pinnedParticipants = [];
        /**
         * Aspect Ratio of participant tile
         *
         * Format: `width:height`
         */
        this.aspectRatio = '16:9';
        /** Gap between participant tiles */
        this.gap = 8;
        /** UI Config */
        this.config = createDefaultConfig();
        /** Icon Pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        /** Grid size */
        this.gridSize = defaultGridSize;
        this.getAdaptiveSize = (length) => {
            if (this.size === 'sm') {
                return 'sm';
            }
            if (length > 3) {
                return 'sm';
            }
            else {
                if (this.size === 'md') {
                    return 'sm';
                }
                return 'md';
            }
        };
    }
    render() {
        const defaults = {
            meeting: this.meeting,
            config: this.config,
            states: this.states,
            size: this.size,
            iconPack: this.iconPack,
            t: this.t,
        };
        const nonPinnedParticipants = this.participants.filter((p) => this.pinnedParticipants.some((pt) => pt.id != p.id));
        return (h(Host, { key: '1cb846cc92b660a8244d16a74f48dfadcef903b6' }, h("main", { key: '8564f8b0bf6e7bd668132e2833fe73c73855d090', part: "main" }, h(Render, { key: '61b96f305727dc74de15f4c3c645069d6300afd9', element: "rtk-simple-grid", defaults: defaults, props: {
                part: 'main-grid',
                participants: this.pinnedParticipants,
                aspectRatio: this.aspectRatio,
                gap: this.gap,
                size: this.getAdaptiveSize(this.pinnedParticipants.length),
            } })), nonPinnedParticipants.length > 0 && (h("aside", { key: '2e297a8d83c1f7241d8688b643c055331d69299b', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, h(Render, { key: '2c1969c610018dfb0a23308316f072e3b8d87a6e', element: "rtk-simple-grid", defaults: defaults, props: {
                part: 'aside-grid',
                participants: nonPinnedParticipants,
                aspectRatio: this.aspectRatio,
                gap: this.gap,
                size: this.getAdaptiveSize(nonPinnedParticipants.length),
            } })))));
    }
    get host() { return getElement(this); }
};
__decorate([
    SyncWithStore()
], RtkSpotlightGrid.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkSpotlightGrid.prototype, "states", void 0);
__decorate([
    SyncWithStore()
], RtkSpotlightGrid.prototype, "config", void 0);
__decorate([
    SyncWithStore()
], RtkSpotlightGrid.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkSpotlightGrid.prototype, "t", void 0);
RtkSpotlightGrid.style = RtkSpotlightGridStyle0;

export { RtkSpotlightGrid as rtk_spotlight_grid };
