var __decorate = (this && this.__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;
};
import { Host, h } from "@stencil/core";
import { defaultIconPack } from "../../lib/icons";
import { SyncWithStore } from "../../utils/sync-with-store";
const addZero = (n) => Math.trunc(n).toString().padStart(2, '0');
/**
 * Shows the time elapsed in a meeting.
 */
export class RtkClock {
    constructor() {
        /** Icon pack */
        this.iconPack = defaultIconPack;
        this.disconnectMeeting = () => {
            var _a, _b;
            this.timeout && clearTimeout(this.timeout);
            typeof this.request === 'number' && cancelAnimationFrame(this.request);
            (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.removeListener('meetingStartTimeUpdate', this.startedTimeUpdateListener);
        };
        this.startedTimeUpdateListener = () => {
            var _a, _b, _c;
            this.startedTime = (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.meetingStartedTimestamp) === null || _c === void 0 ? void 0 : _c.toISOString();
        };
    }
    connectedCallback() {
        this.meetingChanged(this.meeting);
    }
    disconnectedCallback() {
        this.disconnectMeeting();
    }
    meetingChanged(meeting) {
        var _a, _b, _c;
        this.disconnectMeeting();
        if (meeting != null) {
            this.startedTime = (_b = (_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp) === null || _b === void 0 ? void 0 : _b.toISOString();
            (_c = meeting.meta) === null || _c === void 0 ? void 0 : _c.addListener('meetingStartTimeUpdate', this.startedTimeUpdateListener);
        }
    }
    startedTimeChanged(startedTime) {
        if (startedTime !== undefined) {
            const animate = () => {
                this.timeDiff = (Date.now() - new Date(this.startedTime).getTime()) / 1000;
                this.timeout = setTimeout(() => {
                    if (this.request != null) {
                        this.request = requestAnimationFrame(animate);
                    }
                }, 500);
            };
            this.request = requestAnimationFrame(animate);
        }
    }
    getFormattedTime() {
        if (this.timeDiff == null) {
            return null;
        }
        const diff = this.timeDiff;
        let time = '';
        if (diff >= 3600) {
            time = `${addZero(diff / 3600)}:`;
        }
        time += `${addZero((diff % 3600) / 60)}:${addZero(diff % 60)}`;
        return time;
    }
    render() {
        const showClock = this.startedTime !== undefined;
        return (h(Host, { key: '4592c92b870075a8ec23d89c01c382f61278983a', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
            h("rtk-icon", { key: '87b1012dd7c5d7187182a2ed025868f05ed010e7', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
            h("span", { key: '6fec2fef30be9c54a3e68108fde81a59ce000576', part: "text" }, this.getFormattedTime()),
        ]));
    }
    static get is() { return "rtk-clock"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["rtk-clock.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["rtk-clock.css"]
        };
    }
    static get properties() {
        return {
            "meeting": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Meeting",
                    "resolved": "Client",
                    "references": {
                        "Meeting": {
                            "location": "import",
                            "path": "../../types/rtk-client",
                            "id": "src/types/rtk-client.ts::Meeting"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Meeting object"
                },
                "getter": false,
                "setter": false
            },
            "iconPack": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IconPack",
                    "resolved": "{ people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; }",
                    "references": {
                        "IconPack": {
                            "location": "import",
                            "path": "../../lib/icons",
                            "id": "src/lib/icons/index.ts::IconPack"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Icon pack"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "defaultIconPack"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Size",
                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
                    "references": {
                        "Size": {
                            "location": "import",
                            "path": "../../types/props",
                            "id": "src/types/props.ts::Size"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": true
            }
        };
    }
    static get states() {
        return {
            "startedTime": {},
            "timeDiff": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "meeting",
                "methodName": "meetingChanged"
            }, {
                "propName": "startedTime",
                "methodName": "startedTimeChanged"
            }];
    }
}
__decorate([
    SyncWithStore()
], RtkClock.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkClock.prototype, "iconPack", void 0);
