import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-ae373651.js';
import { i as useLanguage, e as defaultIconPack } from './p-5b3a7f00.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { d as defineCustomElement$2 } from './p-85587a5c.js';
import { d as defineCustomElement$1 } from './p-3e0452c4.js';

const rtkPermissionsMessageCss = ":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{box-sizing:border-box;display:block;max-height:100%;width:600px;overflow-y:auto;padding:var(--rtk-space-6, 24px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));overflow-wrap:break-word;color:rgb(var(--rtk-colors-text-1000, 255 255 255));word-wrap:break-word}.actions{display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.text-icon{display:inline-block;vertical-align:middle}h2{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-4, 16px)}h2 .text-icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-4, 16px)}.need-help-link{margin-top:var(--rtk-space-2, 8px);display:inline-block;text-underline-offset:2px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-400, 53 110 253) / var(--tw-text-opacity))}.need-help-link:hover{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-text-opacity))}a rtk-icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) .actions{flex-direction:column;align-items:flex-start;justify-content:center}:host([size='sm']) .action{width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.actions{margin-top:var(--rtk-space-6, 24px)}.actions rtk-button{flex:1 1 0%}.svg-container{display:flex;width:100%;justify-content:center !important}.svg-ins{width:80%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}";
const RtkPermissionsMessageStyle0 = rtkPermissionsMessageCss;

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 steps = {
    'Chrome.Desktop.audio': ['Chrome1.svg', 'Chrome2.svg', 'Chrome3.svg'],
    'Chrome.Desktop.video': ['Chrome1.svg', 'Chrome2.svg', 'Chrome3.svg'],
};
const RtkPermissionsMessage = /*@__PURE__*/ proxyCustomElement(class RtkPermissionsMessage extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
        /** Language */
        this.t = useLanguage();
        /** Icon Pack */
        this.iconPack = defaultIconPack;
        this.currentStep = 0;
        this.svgSteps = [];
        this.continue = () => {
            this.stateUpdate.emit({
                activePermissionsMessage: { enabled: false },
            });
        };
        this.reload = () => {
            if (typeof window !== 'undefined') {
                window.location.reload();
            }
        };
        this.getImage = async (stepURL) => {
            function replaceAll(target, search, replacement) {
                return target.split(search).join(replacement);
            }
            const svgReq = await fetch(`https://rtk-assets.realtime.cloudflare.com/ui-kit/permissions/${stepURL}`);
            let svg = await svgReq.text();
            svg = replaceAll(svg, 'yoursite.com', location.host);
            svg = replaceAll(svg, 'Yoursite', document.title.length > 14 ? `${document.title.slice(0, 14)}...` : document.title);
            return svg;
        };
        this.nextStep = () => {
            this.currentStep = (this.currentStep + 1) % this.svgSteps.length;
        };
        this.openMacSystemSettings = () => {
            const l = document.createElement('a');
            switch (this.mediaType) {
                case 'audio':
                    l.href = 'x-apple.systempreferences:com.apple.preference.security?Privacy_Microphone';
                    break;
                case 'screenshare':
                    l.href = 'x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture';
                    break;
                case 'video':
                    l.href = 'x-apple.systempreferences:com.apple.preference.security?Privacy_Camera';
                    break;
            }
            l.click();
        };
    }
    connectedCallback() {
        this.meetingChanged(this.meeting);
    }
    disconnectedCallback() {
        if (this.stepsTimer)
            clearTimeout(this.stepsTimer);
    }
    meetingChanged(meeting) {
        var _a, _b, _c;
        if (meeting != null) {
            this.device = meeting.self.device;
            const deviceType = ((_a = this.device) === null || _a === void 0 ? void 0 : _a.isMobile) ? 'Mobile' : 'Desktop';
            const currentSteps = (_c = steps[`${(_b = this.device) === null || _b === void 0 ? void 0 : _b.browserName}.${deviceType}.${this.mediaType}`]) !== null && _c !== void 0 ? _c : [];
            Promise.all(currentSteps.map(this.getImage)).then((currentImages) => {
                this.svgSteps = currentImages;
            });
        }
    }
    getLink(media) {
        let kind;
        switch (media) {
            case 'audio':
                kind = 'microphone';
                break;
            case 'video':
                kind = 'camera';
                break;
            default:
                kind = 'screenshare';
                break;
        }
        const GOOGLE_SEARCH_BASE = 'https://www.google.com/search?q=';
        let query = `Allow+${kind}+access`;
        if (this.device != null) {
            const { browserName, isMobile } = this.device;
            query += '+' + browserName;
            if (isMobile) {
                query += '+mobile';
            }
        }
        return GOOGLE_SEARCH_BASE + query;
    }
    isDeniedBySystem() {
        var _a;
        const permissionsMessage = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.mediaPermissions;
        if (permissionsMessage == null)
            return false;
        if (permissionsMessage[this.mediaType] === 'SYSTEM_DENIED') {
            return true;
        }
        return false;
    }
    getTitle() {
        const isDeniedBySystem = this.isDeniedBySystem();
        if (isDeniedBySystem) {
            return this.t(`perm_sys_denied.${this.mediaType}`);
        }
        return this.t(`perm_denied.${this.mediaType}`);
    }
    get mediaType() {
        var _a, _b, _c;
        return (_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio';
    }
    getMessage() {
        var _a;
        const { browserName, osName } = this.meeting.self.device;
        const isDeniedBySystem = this.isDeniedBySystem();
        const browser = (_a = browserName.toLowerCase()) !== null && _a !== void 0 ? _a : 'others';
        const os = osName !== null && osName !== void 0 ? osName : 'others';
        /* NOTE(ravindra-cloudflare):
          If in case a unknown browser or os doesn't have a translation,
          use the translation for `others`, instead of showing ugly error string,
          such as `perm_denied.video.yandex browser.message`.
        */
        if (isDeniedBySystem) {
            const systemErrorKey = `perm_sys_denied.${this.mediaType}.${os.toLowerCase()}.message`;
            return this.t(systemErrorKey) === systemErrorKey
                ? this.t(`perm_sys_denied.${this.mediaType}.others.message`)
                : this.t(systemErrorKey);
        }
        const browserErrorKey = `perm_denied.${this.mediaType}.${browser}.message`;
        return this.t(browserErrorKey) === browserErrorKey
            ? this.t(`perm_denied.${this.mediaType}.others.message`)
            : this.t(browserErrorKey);
    }
    render() {
        var _a, _b, _c;
        const isDeniedBySystem = this.isDeniedBySystem();
        if (this.svgSteps.length > 0) {
            if (this.stepsTimer)
                clearTimeout(this.stepsTimer);
            this.stepsTimer = setTimeout(this.nextStep, 2500);
        }
        const showMacDeepLink = isDeniedBySystem && this.meeting.self.device.osName == 'macOS';
        return (h(Host, { key: '7e7ee4ed331dc9e736b710ce0e492d0d9a749c1b' }, h("h2", { key: '1100ed23a733006ee6b644cbd7293f3e8b187e1b' }, h("rtk-icon", { key: '23d61902856332821e9b9cf60c126fc4e82f2421', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: 'c39e69a21e4d5d009397cbe0563c89d2f00bf414', class: 'svg-container' }, this.svgSteps.map((e, index) => (h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), h("div", { key: '209bdbc52a9a26b9b71328a57e79d424302bc8ea' }, this.getMessage()), !isDeniedBySystem && (h("a", { key: 'a096c4b00a29239970f8cd23c123a3d94f78b78f', class: "need-help-link", href: this.getLink((_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio'), target: "_blank", rel: "noreferrer external noreferrer noopener" }, h("rtk-icon", { key: '3a0e5cdf4f040381e417a0cf46783ebb47f88f8d', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: '31fa2a14b1d134f2bab798852b0a339cbd5e53c4', class: "actions" }, h("rtk-button", { key: '0574447e6f141a5d899d145f6741500304f16e70', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), h("slot", { key: 'bab0db24f078ff258a8223a9910e089c2e2229e1' })));
    }
    static get watchers() { return {
        "meeting": ["meetingChanged"]
    }; }
    static get style() { return RtkPermissionsMessageStyle0; }
}, [1, "rtk-permissions-message", {
        "meeting": [16],
        "t": [16],
        "iconPack": [16],
        "states": [16],
        "device": [32],
        "currentStep": [32],
        "svgSteps": [32]
    }, undefined, {
        "meeting": ["meetingChanged"]
    }]);
__decorate([
    SyncWithStore()
], RtkPermissionsMessage.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkPermissionsMessage.prototype, "t", void 0);
__decorate([
    SyncWithStore()
], RtkPermissionsMessage.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkPermissionsMessage.prototype, "states", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-permissions-message", "rtk-button", "rtk-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-permissions-message":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkPermissionsMessage);
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkPermissionsMessage as R, defineCustomElement as d };
