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$6 } from './p-85587a5c.js';
import { d as defineCustomElement$5 } from './p-b350d09f.js';
import { d as defineCustomElement$4 } from './p-4c3d522b.js';
import { d as defineCustomElement$3 } from './p-bd5c9c89.js';
import { d as defineCustomElement$2 } from './p-7071c775.js';
import { d as defineCustomElement$1 } from './p-3e0452c4.js';

const rtkDebuggerCss = ":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-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}header{margin-right:var(--rtk-space-2, 8px);display:flex;align-items:center;justify-content:space-between;padding-top:var(--rtk-space-0, 0px);padding-bottom:var(--rtk-space-0, 0px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}header h3{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px)}.back-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{--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;max-width:var(--rtk-space-56, 224px) !important;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / 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:14px;--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-5, 20px);width:var(--rtk-space-5, 20px)}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)}aside button.hidden{display:none}main{position:relative;box-sizing:border-box;display:flex;height:100%;width:100%;flex-direction:column}:host([size='sm']) aside{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));width:100% !important;max-width:100% !important;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 button.hidden{display:none}:host([size='sm']) aside.hide{display:none}aside button:host([size='sm']) aside.hide{display:none}:host([size='sm']) aside button:host([size='sm']) aside.hide{display:none}:host([size='sm']) main{display:none;height:100%;width:100%;padding:var(--rtk-space-0, 0px)}aside button:host([size='sm']) main{display:none}:host([size='sm']) aside button:host([size='sm']) main{display:none}:host([size='sm']) main.active{display:block}:host([size='sm']) header{margin:var(--rtk-space-0, 0px);justify-content:center}:host([size='sm']) header rtk-button{position:absolute;left:var(--rtk-space-4, 16px)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}::-webkit-scrollbar-thumb:hover{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.progress-bar{height:var(--rtk-space-1, 4px);width:100%;overflow:hidden;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.progress-indicator{height:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}";
const RtkDebuggerStyle0 = rtkDebuggerCss;

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 RtkDebugger = /*@__PURE__*/ proxyCustomElement(class RtkDebugger extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
        this.keyPressListener = (e) => {
            if (e.key === 'Escape') {
                this.close();
            }
        };
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        this.activeTab = 'audio';
        this.isMobileMainVisible = false;
        this.progress = 0;
    }
    connectedCallback() {
        document.addEventListener('keydown', this.keyPressListener);
    }
    disconnectedCallback() {
        this.keyPressListener && document.removeEventListener('keydown', this.keyPressListener);
    }
    progressUpdate(event) {
        this.progress = event.detail;
    }
    changeTab(tab) {
        this.activeTab = tab;
        if (this.size === 'sm') {
            if (!this.isMobileMainVisible) {
                this.isMobileMainVisible = true;
            }
        }
    }
    close() {
        this.stateUpdate.emit({ activeDebugger: false });
    }
    getActiveTab() {
        switch (this.activeTab) {
            case 'audio':
                return this.t('debugger.audio.troubleshooting.label');
            case 'screenshare':
                return this.t('debugger.screenshare.troubleshooting.label');
            case 'video':
                return this.t('debugger.video.troubleshooting.label');
            case 'system':
                return this.t('debugger.system.troubleshooting.label');
            default:
                return this.t('debugger.troubleshooting.label');
        }
    }
    render() {
        if (!this.meeting)
            return null;
        const defaults = {
            meeting: this.meeting,
            states: this.states,
            iconPack: this.iconPack,
            t: this.t,
            size: this.size,
        };
        const tab = this.getActiveTab();
        const showSystemsTab = typeof navigator.getBattery !== 'undefined';
        return (h(Host, null, h("aside", { class: { hide: this.isMobileMainVisible }, part: "menu" }, h("header", null, h("h3", null, this.t('debugger.troubleshooting.label'))), h("button", { type: "button", class: { active: this.activeTab === 'audio' }, onClick: () => this.changeTab('audio') }, this.t('debugger.audio.label'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.mic_on }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right }))), h("button", { type: "button", class: { active: this.activeTab === 'video' }, onClick: () => this.changeTab('video') }, this.t('debugger.video.label'), 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: "button", class: { active: this.activeTab === 'screenshare' }, onClick: () => this.changeTab('screenshare') }, this.t('debugger.screenshare.label'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.share_screen_start }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right }))), h("button", { type: "button", class: { active: this.activeTab === 'system', hidden: !showSystemsTab }, onClick: () => this.changeTab('system') }, this.t('debugger.system.label'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.settings }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right })))), h("main", { class: { active: this.isMobileMainVisible }, 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("h4", null, tab))), this.activeTab === 'audio' && h("rtk-debugger-audio", Object.assign({}, defaults)), this.activeTab === 'video' && h("rtk-debugger-video", Object.assign({}, defaults)), this.activeTab === 'screenshare' && (h("rtk-debugger-screenshare", Object.assign({}, defaults))), this.activeTab === 'system' && showSystemsTab && (h("rtk-debugger-system", Object.assign({}, defaults))))));
    }
    static get style() { return RtkDebuggerStyle0; }
}, [1, "rtk-debugger", {
        "meeting": [16],
        "states": [16],
        "size": [513],
        "iconPack": [16],
        "t": [16],
        "activeTab": [32],
        "isMobileMainVisible": [32],
        "progress": [32]
    }, [[0, "testProgress", "progressUpdate"]]]);
__decorate([
    SyncWithStore()
], RtkDebugger.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkDebugger.prototype, "states", void 0);
__decorate([
    SyncWithStore()
], RtkDebugger.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkDebugger.prototype, "t", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-debugger", "rtk-button", "rtk-debugger-audio", "rtk-debugger-screenshare", "rtk-debugger-system", "rtk-debugger-video", "rtk-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-debugger":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkDebugger);
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "rtk-debugger-audio":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "rtk-debugger-screenshare":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "rtk-debugger-system":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "rtk-debugger-video":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkDebugger as R, defineCustomElement as d };
