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

const rtkSpotlightIndicatorCss = ":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{font-size:12px}#sync-button{flex-direction:row;border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-1, 4px);display:flex;align-items:center;justify-content:center;margin-bottom:var(--rtk-space-1, 4px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) rtk-tooltip,:host([size='md']) rtk-tooltip{width:100%}:host([size='sm'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px);padding-left:var(--rtk-space-0, 0px)}:host([size='md'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}:host([size='lg'])>#sync-button{flex-direction:row;height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}@media (orientation: portrait){:host([size='lg']) #sync-button{flex-direction:column-reverse;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='md']) #sync-button{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='sm']) #sync-button{height:var(--rtk-space-10, 40px);width:var(--rtk-space-16, 64px);flex-direction:row}}#sync-button>rtk-icon{max-height:14px}#sync-button rtk-icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']) #sync-button>rtk-icon{width:auto}#sync-button.active rtk-icon{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}div{align-content:center;line-height:2rem}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-8, 32px)}#sync-button.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-bg-opacity))}";
const RtkSpotlightIndicatorStyle0 = rtkSpotlightIndicatorCss;

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 RtkSpotlightIndicator = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        this.permissionsUpdateListener = () => {
            this.canSpotlight = this.meeting.self.permissions.canSpotlight;
        };
    }
    connectedCallback() {
        this.meetingChanged(this.meeting);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
    }
    meetingChanged(meeting) {
        var _a, _b;
        if (meeting != null) {
            this.canSpotlight = meeting.self.permissions.canSpotlight;
            this.isSpotlighted = (_b = (_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.broadcastTabChanges) !== null && _b !== void 0 ? _b : false;
            meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
        }
    }
    updateSpotlightState(shouldBroadcastTabChanges) {
        var _a;
        try {
            (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.setBroadcastTabChanges(shouldBroadcastTabChanges);
            this.isSpotlighted = shouldBroadcastTabChanges;
        }
        catch (e) {
            // eslint-disable-next-line no-console
            console.error(e);
        }
    }
    render() {
        if (!this.canSpotlight)
            return;
        return (h(Host, null, h("rtk-tooltip", { size: 'md', label: this.t('remote_access.indicator') }, h("div", { id: "sync-button", class: {
                tab: true,
                active: this.isSpotlighted,
            }, onClick: () => this.updateSpotlightState(!this.isSpotlighted) }, h("span", { class: "name" }, "Sync"), h("rtk-icon", { id: "icon", icon: this.isSpotlighted ? this.iconPack.checkmark : this.iconPack.warning, tabIndex: -1, "aria-hidden": true })))));
    }
    static get watchers() { return {
        "meeting": ["meetingChanged"]
    }; }
};
__decorate([
    SyncWithStore()
], RtkSpotlightIndicator.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkSpotlightIndicator.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkSpotlightIndicator.prototype, "t", void 0);
RtkSpotlightIndicator.style = RtkSpotlightIndicatorStyle0;

export { RtkSpotlightIndicator as rtk_spotlight_indicator };
