'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index$1 = require('./index-2e5758b6.js');
const uiStore = require('./ui-store-583d205a.js');
const grid = require('./grid-edc342a7.js');
const index$2 = require('./index-6f8c1928.js');
const index = require('./index-3f8e5441.js');

const rtkMixedGridCss = ":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:block;height:100%;width:100%;display:flex}main{display:flex;flex:1 1 0%;padding-left:var(--rtk-space-4, 16px)}:host([layout='column']) main{padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}main rtk-tab-bar{margin-right:var(--rtk-space-4, 16px);box-sizing:border-box;display:flex;height:100%;width:var(--rtk-space-16, 64px);flex-direction:column}main #tabs{height:100%;flex:1 1 0%}rtk-button{z-index:10}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}.col{display:flex;flex-direction:column;align-items:center}.tab{display:flex;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);align-items:center;justify-content:center;margin-bottom:var(--rtk-space-2, 8px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.tab.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}.tab img{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);border-radius:var(--rtk-border-radius-sm, 4px)}:host([size='sm']){flex-direction:column}:host([size='sm']) .grid-width-lg,:host([size='sm']) .grid-width-md{height:50%;width:100%;max-width:100%}:host([size='sm']) .grid-width-sm{height:33.333333%;width:100%;max-width:100%}:host([size='sm']) main{display:flex;flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='sm']) rtk-tab-bar{height:var(--rtk-space-12, 48px);width:100%;flex-direction:row}:host([size='sm']) #tabs{flex:1 1 0%}:host([size='sm']) .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}:host([layout='column']){flex-direction:column}:host([layout='column']) main{display:flex;flex:1 1 0%}:host([layout='column']) .grid-width-lg,:host([layout='column']) .grid-width-md{height:50%;max-width:100%;width:100%}:host([layout='column']) .grid-width-sm{height:33.333333%;max-width:100%;width:100%}@media (orientation: portrait){:host{flex-direction:column}:host .grid-width-lg{height:50%;width:100%;max-width:100%}:host .grid-width-md{height:33.333333%;width:100%;max-width:100%}:host .grid-width-sm{height:25%;width:100%;max-width:100%}:host main{flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='md']) main{flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host rtk-tab-bar{height:var(--rtk-space-16, 64px);width:100%;flex-direction:row}:host #tabs{flex:1 1 0%}:host .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}}@media (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}:host .grid-width-lg{height:50%;width:100%;max-width:100%}:host([size='sm']) .grid-width-sm{height:100%;max-height:100%;width:16.666667%}:host([size='sm']) main{flex:1 1 0%;flex-direction:row;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}:host([size='md']) main{flex:1 1 0%;flex-direction:row;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='sm']) rtk-tab-bar{margin-right:var(--rtk-space-2, 8px);height:100%;width:var(--rtk-space-12, 48px);flex-direction:column}:host #tabs{flex:1 1 0%}:host .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}}";
const RtkMixedGridStyle0 = rtkMixedGridCss;

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 RtkMixedGrid = class {
    constructor(hostRef) {
        index$1.registerInstance(this, hostRef);
        /** Grid Layout */
        this.layout = 'row';
        /** Participants */
        this.participants = [];
        /** Pinned Participants */
        this.pinnedParticipants = [];
        /** Screenshare Participants */
        this.screenShareParticipants = [];
        /** Active Plugins */
        this.plugins = [];
        /**
         * Aspect Ratio of participant tile
         *
         * Format: `width:height`
         */
        this.aspectRatio = '16:9';
        /** Gap between participant tiles */
        this.gap = 8;
        /** UI Config */
        this.config = uiStore.createDefaultConfig();
        /** Icon Pack */
        this.iconPack = uiStore.defaultIconPack;
        /** Language */
        this.t = uiStore.useLanguage();
        /** Grid size */
        this.gridSize = grid.defaultGridSize;
    }
    componentWillLoad() {
        // initialise states
        this.initialised = false;
        this.screenShareParticipantsChanged(this.screenShareParticipants);
        this.pluginsChanged(this.plugins);
        this.initialised = true;
    }
    connectedCallback() {
        this.meetingChanged(this.meeting);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.removeListener('activeTabUpdate', this.activeTabUpdateListener);
    }
    meetingChanged(meeting) {
        var _a, _b, _c, _d;
        if (meeting != null) {
            if (((_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.selfActiveTab) != undefined) {
                this.onActiveTabUpdate((_b = meeting.meta.selfActiveTab) === null || _b === void 0 ? void 0 : _b.type, (_c = meeting.meta.selfActiveTab) === null || _c === void 0 ? void 0 : _c.id);
            }
            this.activeTabUpdateListener = (activeTab) => {
                this.onActiveTabUpdate(activeTab === null || activeTab === void 0 ? void 0 : activeTab.type, activeTab === null || activeTab === void 0 ? void 0 : activeTab.id);
            };
            (_d = meeting.meta) === null || _d === void 0 ? void 0 : _d.addListener('activeTabUpdate', this.activeTabUpdateListener);
        }
    }
    screenShareParticipantsChanged(participants = []) {
        // If active tab has already been initialised by spotlight then don't change tab.
        if (!this.initialised && this.activeTab != null)
            return;
        if (this.activeTab == null && participants.length > 0) {
            this.setActiveTab({ type: 'screenshare', participant: participants[0] });
        }
        else {
            this.revalidateActiveTab();
        }
    }
    pluginsChanged(plugins) {
        // If active tab has already been initialised by spotlight then don't change tab.
        if (!this.initialised && this.activeTab != null)
            return;
        if (plugins.length > 0) {
            const lastIndex = plugins.length - 1;
            this.setActiveTab({ type: 'plugin', plugin: plugins[lastIndex] });
        }
        else {
            this.revalidateActiveTab();
        }
    }
    revalidateActiveTab() {
        if (this.activeTab != null) {
            if (this.activeTab.type === 'screenshare') {
                const { participant } = this.activeTab;
                if (!this.screenShareParticipants.some((p) => p.id === participant.id)) {
                    this.reassignActiveTab();
                }
            }
            else {
                const { plugin } = this.activeTab;
                if (!this.plugins.some((p) => p.id === plugin.id)) {
                    this.reassignActiveTab();
                }
            }
        }
    }
    setActiveTab(activeTab, shouldUpdateSelfActiveTab = true) {
        var _a;
        this.activeTab = activeTab;
        const id = activeTab.type === 'screenshare' ? activeTab.participant.id : activeTab.plugin.id;
        if (shouldUpdateSelfActiveTab)
            (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.setSelfActiveTab({ type: activeTab.type, id }, 0);
    }
    reassignActiveTab() {
        if (this.screenShareParticipants.length > 0) {
            this.setActiveTab({ type: 'screenshare', participant: this.screenShareParticipants[0] });
        }
        else if (this.plugins.length > 0) {
            const lastIndex = this.plugins.length - 1;
            this.setActiveTab({ type: 'plugin', plugin: this.plugins[lastIndex] });
        }
    }
    onActiveTabUpdate(type, id) {
        if (type == undefined)
            return;
        if (id == undefined)
            return;
        switch (type) {
            case 'plugin':
                const plugin = this.plugins.find((p) => p.id === id);
                if (plugin != undefined)
                    this.setActiveTab({ type: 'plugin', plugin }, false);
                break;
            case 'screenshare':
                const participant = this.screenShareParticipants.find((ssp) => ssp.id === id);
                if (participant != undefined)
                    this.setActiveTab({ type: 'screenshare', participant }, false);
        }
    }
    getTabs() {
        const screenshares = this.screenShareParticipants.map((participant) => ({
            type: 'screenshare',
            participant,
        }));
        const plugins = this.plugins.map((plugin) => ({ type: 'plugin', plugin }));
        return screenshares.concat(plugins);
    }
    render() {
        var _a, _b;
        if (!this.meeting)
            return null;
        const defaults = {
            meeting: this.meeting,
            config: this.config,
            states: this.states,
            size: this.size,
            iconPack: this.iconPack,
            t: this.t,
        };
        return (index$1.h(index$1.Host, null, index$1.h("main", { id: "main-view", part: "main-view" }, ((_a = this.getTabs()) === null || _a === void 0 ? void 0 : _a.length) > 1 && (index$1.h("rtk-tab-bar", Object.assign({ activeTab: this.activeTab, tabs: this.getTabs(), onTabChange: (e) => this.setActiveTab(e.detail) }, defaults))), index$1.h("div", { id: "tabs", key: "tabs" }, this.screenShareParticipants.map((participant) => {
            var _a, _b;
            return (index$1.h(index$2.Render, { element: "rtk-screenshare-view", defaults: defaults, props: {
                    participant,
                    key: participant.id,
                    style: {
                        display: ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'screenshare' &&
                            ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.participant.id) === participant.id
                            ? 'flex'
                            : 'none',
                    },
                }, childProps: { participant, isScreenShare: true }, deepProps: true }));
        }), this.plugins.map((plugin) => {
            var _a, _b;
            return (index$1.h("rtk-plugin-main", Object.assign({}, defaults, { plugin: plugin, key: plugin.id, style: {
                    display: ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'plugin' && ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.plugin.id) === plugin.id
                        ? 'flex'
                        : 'none',
                } })));
        }))), index$1.h(index$2.Render, { element: "rtk-mixed-grid", defaults: defaults, childProps: {
                part: 'participants-grid',
                class: this.gridSize.mixed ? `grid-width-${this.gridSize.mixed}` : 'grid-width-lg',
                participants: this.participants,
                pinnedParticipants: this.pinnedParticipants,
                screenShareParticipants: this.screenShareParticipants,
                plugins: this.plugins,
                aspectRatio: this.aspectRatio,
                gap: this.gap,
                size: ((_b = this.meeting.meta) === null || _b === void 0 ? void 0 : _b.viewType) === 'AUDIO_ROOM' ? 'md' : 'sm',
                layout: 'row',
            }, onlyChildren: true })));
    }
    get host() { return index$1.getElement(this); }
    static get watchers() { return {
        "meeting": ["meetingChanged"],
        "screenShareParticipants": ["screenShareParticipantsChanged"],
        "plugins": ["pluginsChanged"]
    }; }
};
__decorate([
    index.SyncWithStore()
], RtkMixedGrid.prototype, "meeting", void 0);
__decorate([
    index.SyncWithStore()
], RtkMixedGrid.prototype, "states", void 0);
__decorate([
    index.SyncWithStore()
], RtkMixedGrid.prototype, "config", void 0);
__decorate([
    index.SyncWithStore()
], RtkMixedGrid.prototype, "iconPack", void 0);
__decorate([
    index.SyncWithStore()
], RtkMixedGrid.prototype, "t", void 0);
RtkMixedGrid.style = RtkMixedGridStyle0;

exports.rtk_mixed_grid = RtkMixedGrid;
