import { r as registerInstance, d as createEvent, h, a as Host } from './index-55463a54.js';
import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './ui-store-76bb0e8e.js';
import { S as SyncWithStore } from './index-dafb4b7f.js';
import { d as debounce } from './debounce-296a3316.js';

const rtkParticipantsCss = ":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)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;height:100%;width:100%;flex-direction:column;font-size:14px}*{box-sizing:border-box}.ctr{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);box-sizing:border-box;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-0, 0px);padding-bottom:var(--rtk-space-0, 0px);overflow-y:auto;flex-grow:1;flex-basis:0}.ctr.virtualised{overflow-y:hidden}.search{position:sticky;box-sizing:border-box;display:flex;align-items:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));margin-left:var(--rtk-space-3, 12px);margin-right:var(--rtk-space-3, 12px);margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px)}.search rtk-icon{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.search input{box-sizing:border-box;height:var(--rtk-space-9, 36px);width:100%;padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);font-size:14px}.search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}:host([size='md']) .search{margin-top:var(--rtk-space-4, 16px) !important;margin-bottom:var(--rtk-space-4, 16px) !important}:host([size='sm']) .search{margin-top:var(--rtk-space-4, 16px) !important;margin-bottom:var(--rtk-space-4, 16px) !important}.no-pending-requests{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);text-align:center;font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}";
const RtkParticipantsStyle0 = rtkParticipantsCss;

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 RtkParticipants = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
        /** Config */
        this.config = createDefaultConfig();
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Default section */
        this.defaultParticipantsTabId = 'stage-list';
        /** Language */
        this.t = useLanguage();
        this.currentParticipantsTabId = this.defaultParticipantsTabId;
        this.tabs = [];
        this.hasRequests = false;
        this.search = '';
        this.updateParticipantCountsInTabs = debounce(() => {
            var _a;
            // totalRequests consist of stage requests & waitlisted ones
            let totalRequests = ((_a = this.meeting.participants.waitlisted) === null || _a === void 0 ? void 0 : _a.size) || 0;
            let totalOnStage = 0;
            let totalViewers = 0;
            this.meeting.participants.joined.toArray().forEach((participant) => {
                if (participant.stageStatus === 'ON_STAGE') {
                    totalOnStage++;
                }
                if (participant.stageStatus === 'OFF_STAGE') {
                    totalViewers++;
                }
                if (participant.stageStatus === 'REQUESTED_TO_JOIN_STAGE') {
                    totalRequests++;
                    totalViewers++;
                }
                if (participant.stageStatus === 'ACCEPTED_TO_JOIN_STAGE') {
                    totalViewers++;
                }
            });
            if (this.meeting.self.stageStatus === 'ON_STAGE') {
                totalOnStage++;
            }
            if (this.meeting.self.stageStatus === 'OFF_STAGE') {
                totalViewers++;
            }
            if (this.meeting.self.stageStatus === 'REQUESTED_TO_JOIN_STAGE') {
                totalRequests++;
                totalViewers++;
            }
            if (this.meeting.self.stageStatus === 'ACCEPTED_TO_JOIN_STAGE') {
                totalViewers++;
            }
            const tabs = [];
            if (this.shouldShowRequestsTab()) {
                tabs.push({
                    id: 'requests',
                    name: (h("span", null, this.t('requests'), "\u00A0", h("span", { class: `tab-participant-count-badge ${totalRequests > 0 ? 'requests-pending' : ''} ${this.currentParticipantsTabId === 'requests' ? 'selected-tab' : ''}` }, totalRequests))),
                });
            }
            tabs.push({
                id: 'stage-list',
                name: (h("span", null, this.t('participants'), "\u00A0", h("span", { class: `tab-participant-count-badge ${this.currentParticipantsTabId === 'stage-list' ? 'selected-tab' : ''}` }, totalOnStage))),
            });
            if (this.shouldShowViewersTab()) {
                tabs.push({
                    id: 'viewer-list',
                    name: (h("span", null, this.t('viewers'), "\u00A0", h("span", { class: `tab-participant-count-badge ${this.currentParticipantsTabId === 'viewer-list' ? 'selected-tab' : ''}` }, totalViewers))),
                });
            }
            this.tabs = tabs;
            this.hasRequests = totalRequests > 0;
        });
        this.onSearchInput = (e) => {
            this.search = e.target.value;
        };
        this.shouldShowViewersTab = () => {
            var _a, _b, _c;
            return (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.permissions) === null || _c === void 0 ? void 0 : _c.stageEnabled;
        };
        this.shouldShowRequestsTab = () => {
            var _a;
            let shouldShowWaitlist = false;
            if (this.meeting.meta.viewType === 'LIVESTREAM') {
                shouldShowWaitlist = false;
            }
            else {
                shouldShowWaitlist =
                    ((_a = this.meeting.self.config.waitingRoom) === null || _a === void 0 ? void 0 : _a.isEnabled) &&
                        this.meeting.self.permissions.acceptWaitingRequests;
            }
            return ((this.meeting.self.permissions.stageEnabled &&
                this.meeting.self.permissions.acceptStageRequests) ||
                shouldShowWaitlist);
        };
        this.viewSection = (section) => {
            this.currentParticipantsTabId = section;
        };
    }
    connectedCallback() {
        this.meetingChanged(this.meeting);
    }
    disconnectedCallback() {
        if (!this.meeting)
            return;
        this.meeting.participants.joined.off('participantJoined', this.updateParticipantCountsInTabs);
        this.meeting.participants.joined.off('participantsUpdate', this.updateParticipantCountsInTabs);
        this.meeting.participants.joined.off('participantLeft', this.updateParticipantCountsInTabs);
        this.meeting.participants.joined.off('stageStatusUpdate', this.updateParticipantCountsInTabs);
        this.meeting.stage.off('stageStatusUpdate', this.updateParticipantCountsInTabs);
        this.meeting.participants.waitlisted.off('participantJoined', this.updateParticipantCountsInTabs);
        this.meeting.participants.waitlisted.off('participantLeft', this.updateParticipantCountsInTabs);
        this.meeting.participants.waitlisted.off('stageStatusUpdate', this.updateParticipantCountsInTabs);
    }
    meetingChanged(meeting) {
        if (!meeting)
            return;
        meeting.participants.joined.on('participantJoined', this.updateParticipantCountsInTabs);
        meeting.participants.joined.on('participantsUpdate', this.updateParticipantCountsInTabs);
        meeting.participants.joined.on('participantLeft', this.updateParticipantCountsInTabs);
        meeting.participants.joined.on('stageStatusUpdate', this.updateParticipantCountsInTabs);
        meeting.stage.on('stageStatusUpdate', this.updateParticipantCountsInTabs);
        meeting.participants.waitlisted.on('participantJoined', this.updateParticipantCountsInTabs);
        meeting.participants.waitlisted.on('participantLeft', this.updateParticipantCountsInTabs);
        meeting.participants.waitlisted.on('stageStatusUpdate', this.updateParticipantCountsInTabs);
        this.updateParticipantCountsInTabs();
    }
    currentParticipantsTabIdChanged() {
        this.stateUpdate.emit({
            participantsTabId: this.currentParticipantsTabId,
        });
        this.updateParticipantCountsInTabs();
    }
    render() {
        if (!this.meeting)
            return null;
        const defaults = {
            meeting: this.meeting,
            states: this.states,
            config: this.config,
            size: this.size,
            iconPack: this.iconPack,
            t: this.t,
        };
        return (h(Host, null, h("div", { class: "search", part: "search" }, h("rtk-icon", { icon: this.iconPack.search, part: "search-icon" }), h("input", { type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), h("slot", { name: "start" }), h("div", { class: `ctr scrollbar ${this.currentParticipantsTabId !== 'requests' ? 'virtualised' : ''}`, part: "container" }, h("rtk-sidebar-ui", { tabs: this.tabs, currentTab: this.currentParticipantsTabId, view: "full-screen", hideHeader: true, hideCloseAction: true, style: { position: 'relative' }, onTabChange: (e) => {
                this.viewSection(e.detail);
                e.stopPropagation();
            } }, (!this.currentParticipantsTabId || this.currentParticipantsTabId === 'stage-list') && (h("div", { slot: "stage-list", style: { marginTop: '10px', height: '100%' } }, h("rtk-participants-stage-list", Object.assign({}, defaults, { search: this.search, hideHeader: true })))), this.currentParticipantsTabId === 'requests' && (h("div", { slot: "requests", style: { marginTop: '10px', height: '100%' } }, !this.hasRequests && (h("div", { class: "no-pending-requests" }, this.t('participants.no_pending_requests'))), h("rtk-participants-stage-queue", Object.assign({}, defaults)), h("rtk-participants-waiting-list", Object.assign({}, defaults)))), this.currentParticipantsTabId === 'viewer-list' && (h("div", { slot: "viewer-list", style: { marginTop: '10px', height: '100%' } }, h("rtk-participants-viewer-list", Object.assign({}, defaults, { search: this.search, hideHeader: true })))))), h("slot", { name: "end" })));
    }
    static get watchers() { return {
        "meeting": ["meetingChanged"],
        "currentParticipantsTabId": ["currentParticipantsTabIdChanged"]
    }; }
};
__decorate([
    SyncWithStore()
], RtkParticipants.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkParticipants.prototype, "states", void 0);
__decorate([
    SyncWithStore()
], RtkParticipants.prototype, "config", void 0);
__decorate([
    SyncWithStore()
], RtkParticipants.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkParticipants.prototype, "t", void 0);
RtkParticipants.style = RtkParticipantsStyle0;

export { RtkParticipants as rtk_participants };
