import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-ae373651.js';
import { e as defaultIconPack, i as useLanguage } from './p-5b3a7f00.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { d as defineCustomElement$b } from './p-0a836b64.js';
import { d as defineCustomElement$a } from './p-85587a5c.js';
import { d as defineCustomElement$9 } from './p-3e49e36a.js';
import { d as defineCustomElement$8 } from './p-3e0452c4.js';
import { d as defineCustomElement$7 } from './p-550ddac7.js';
import { d as defineCustomElement$6 } from './p-c6700b7b.js';
import { d as defineCustomElement$5 } from './p-4a34e1d0.js';
import { d as defineCustomElement$4 } from './p-9033d188.js';
import { d as defineCustomElement$3 } from './p-9068e892.js';
import { d as defineCustomElement$2 } from './p-e1f78de7.js';

const rtkSettingsCss = ":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{position:relative;display:flex;overflow:hidden;border-radius:var(--rtk-border-radius-md, 8px);width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}header{display:flex;align-items:center;justify-content:space-between;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}.title{font-size:20px;line-height:1}.back-btn,.dismiss-btn{border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.back-btn:hover,.dismiss-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}aside{box-sizing:border-box;display:flex;min-width:var(--rtk-space-56, 224px);flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));padding-left:var(--rtk-space-2, 8px)}aside button{margin-top:var(--rtk-space-4, 16px);box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;border-top-left-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);background-color:transparent;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));cursor:default;font-size:16px;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px}aside button .right{display:flex;align-items:center}aside button .right rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}aside button .right rtk-icon:last-child{margin-left:var(--rtk-space-4, 16px)}aside button[type='button']{cursor:pointer;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}aside button[type='button']:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}aside button[type='button']{border-right:var(--rtk-border-width-md, 2px) solid transparent}aside button.active{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}aside button.active:hover{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}rtk-icon.poor{--tw-text-opacity:1;color:rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-text-opacity))}rtk-icon.poorest{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon.good{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}main{display:flex;flex:1 1 0%;align-items:center;justify-content:center;padding-left:var(--rtk-space-6, 24px);padding-right:var(--rtk-space-6, 24px);box-sizing:border-box;width:100%;max-width:calc(100% - var(--rtk-space-56, 224px))}.dismiss-btn{position:absolute;top:var(--rtk-space-3, 12px);right:var(--rtk-space-3, 12px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']) aside{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([size='sm']) .dismiss-btn{top:var(--rtk-space-5, 20px);right:var(--rtk-space-4, 16px)}:host([size='sm']) aside{width:100%;padding-left:var(--rtk-space-0, 0px)}:host([size='sm']) aside button{border-radius:var(--rtk-border-radius-none, 0)}:host([size='sm']) aside button.active{border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent}:host([size='sm']) aside button.active:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) aside.hide{display:none}:host([size='sm']) main{display:none;max-width:100%;overflow-y:auto;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='sm']) main header{justify-content:center}:host([size='sm']) main header rtk-button{position:absolute;left:var(--rtk-space-4, 16px)}:host([size='sm']) main.active{display:block}";
const RtkSettingsStyle0 = rtkSettingsCss;

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 RtkSettings$1 = /*@__PURE__*/ proxyCustomElement(class RtkSettings extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
        this.keyPressListener = (e) => {
            if (e.key === 'Escape') {
                this.close();
            }
        };
        this.stageStatusListener = () => {
            this.canProduceVideo = this.meeting.self.permissions.canProduceVideo === 'ALLOWED';
        };
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        this.activeTab = 'connection';
        this.isMobileMainVisible = false;
        this.networkStatus = 'good';
        this.canProduceVideo = false;
    }
    connectedCallback() {
        document.addEventListener('keydown', this.keyPressListener);
        this.meetingChanged(this.meeting);
    }
    disconnectedCallback() {
        var _a;
        // NOTE(ishita1805): hidden because preview was removed from self.
        // this.meeting?.self.disablePreview();
        this.keyPressListener && document.removeEventListener('keydown', this.keyPressListener);
        this.poorConnectionListener &&
            ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta.removeListener('poorConnection', this.poorConnectionListener));
        this.meeting.stage.removeListener('stageStatusUpdate', this.stageStatusListener);
    }
    meetingChanged(meeting) {
        if (meeting != null) {
            this.canProduceVideo = this.meeting.self.permissions.canProduceVideo === 'ALLOWED';
            if (!this.canProduceVideo) {
                this.activeTab = 'audio';
            }
            else {
                this.activeTab = 'video';
            }
            this.poorConnectionListener = ({ score }) => {
                if (score < 7) {
                    this.networkStatus = 'poor';
                }
                else if (score < 4) {
                    this.networkStatus = 'poorest';
                }
                setTimeout(() => {
                    // reset after 5 seconds
                    this.networkStatus = 'good';
                }, 5000);
            };
            meeting.meta.addListener('poorConnection', this.poorConnectionListener);
            meeting.stage.addListener('stageStatusUpdate', this.stageStatusListener);
        }
    }
    changeTab(tab) {
        this.activeTab = tab;
        if (this.size === 'sm') {
            if (!this.isMobileMainVisible) {
                this.isMobileMainVisible = true;
            }
        }
    }
    close() {
        this.stateUpdate.emit({ activeSettings: false });
    }
    render() {
        if (!this.meeting)
            return null;
        const defaults = {
            meeting: this.meeting,
            states: this.states,
            iconPack: this.iconPack,
            t: this.t,
        };
        return (h(Host, null, h("aside", { class: { hide: this.isMobileMainVisible }, part: "menu" }, h("header", null, h("h2", null, this.t('settings'))), h("button", { type: "button", class: { active: this.activeTab === 'audio' }, onClick: () => this.changeTab('audio') }, this.t('audio'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.mic_on }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right }))), this.canProduceVideo && (h("button", { type: "button", class: { active: this.activeTab === 'video' }, onClick: () => this.changeTab('video') }, this.t('video'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.video_on }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right })))), h("button", { type: "none", title: `Your network condition is ${this.networkStatus}` }, this.t('connection'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.wifi, class: this.networkStatus })))), h("main", { class: { active: this.isMobileMainVisible, scrollbar: true }, part: "main-content" }, this.size === 'sm' && (h("header", null, h("rtk-button", { kind: "icon", class: "back-btn", onClick: () => (this.isMobileMainVisible = false) }, h("rtk-icon", { icon: this.iconPack.chevron_left })), h("h2", null, this.t(this.activeTab === 'audio' ? 'audio' : 'video')))), this.activeTab === 'audio' && h("rtk-settings-audio", Object.assign({}, defaults)), this.activeTab === 'video' && h("rtk-settings-video", Object.assign({}, defaults)))));
    }
    static get watchers() { return {
        "meeting": ["meetingChanged"]
    }; }
    static get style() { return RtkSettingsStyle0; }
}, [1, "rtk-settings", {
        "meeting": [16],
        "states": [16],
        "size": [513],
        "iconPack": [16],
        "t": [16],
        "activeTab": [32],
        "isMobileMainVisible": [32],
        "networkStatus": [32],
        "canProduceVideo": [32]
    }, undefined, {
        "meeting": ["meetingChanged"]
    }]);
__decorate([
    SyncWithStore()
], RtkSettings$1.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkSettings$1.prototype, "states", void 0);
__decorate([
    SyncWithStore()
], RtkSettings$1.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkSettings$1.prototype, "t", void 0);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-settings", "rtk-audio-visualizer", "rtk-button", "rtk-camera-selector", "rtk-icon", "rtk-microphone-selector", "rtk-participant-tile", "rtk-settings-audio", "rtk-settings-video", "rtk-speaker-selector", "rtk-switch"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-settings":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkSettings$1);
            }
            break;
        case "rtk-audio-visualizer":
            if (!customElements.get(tagName)) {
                defineCustomElement$b();
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "rtk-camera-selector":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "rtk-microphone-selector":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "rtk-participant-tile":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "rtk-settings-audio":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "rtk-settings-video":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "rtk-speaker-selector":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "rtk-switch":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const RtkSettings = RtkSettings$1;
const defineCustomElement = defineCustomElement$1;

export { RtkSettings, defineCustomElement };
