import { p as proxyCustomElement, H, e as createEvent, w as writeTask, h, c as Host } from './p-ae373651.js';
import { e as defaultIconPack, i as useLanguage, G as getAllConnectedParticipants, H as participantIdentifier } from './p-5b3a7f00.js';
import { f as formatName, s as shorten } from './p-efabd2ce.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { d as defineCustomElement$5 } from './p-a3bf84d7.js';
import { d as defineCustomElement$4 } from './p-85587a5c.js';
import { d as defineCustomElement$3 } from './p-3e0452c4.js';
import { d as defineCustomElement$2 } from './p-e6245534.js';
import { d as defineCustomElement$1 } from './p-bece0226.js';

const rtkBreakoutRoomManagerCss = ":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{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-sm, 4px)}@keyframes bg-glow{25%{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}50%{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}75%{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}}.glowing-card{animation:bg-glow 0.8s}.selector-mode,.assign-mode{display:flex;flex-direction:column;align-items:center;padding:var(--rtk-space-2, 8px);cursor:pointer}.selector:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.show-on-hover{display:none}.header{width:100%;display:flex;align-items:center}.header rtk-icon{margin-left:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);cursor:pointer}.header .danger{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.header .hide{display:none}.header .rooms-container{display:flex;flex-grow:1;flex-direction:row;align-items:center;justify-content:flex-end}.header input{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));max-width:var(--rtk-space-36, 144px);font-size:14px;font-weight:500;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity))}.header input:disabled{overflow-x:visible;border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent}.header input:invalid{border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:dashed;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-border-opacity))}.header input.editing-enabled{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.header .participant-count{display:flex;align-items:center;font-size:14px;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.header .participant-count rtk-icon{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0\\.5, 2px);width:var(--rtk-space-3, 12px)}.header .assign-button{height:var(--rtk-space-6, 24px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));text-decoration-line:underline}.header .assign-button:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.participant-list{display:grid;flex-grow:1;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--rtk-space-2, 8px);margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);width:100%;border-radius:var(--rtk-border-radius-sm, 4px)}.participant-list::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px)}.participant-list::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.participant-list::-webkit-scrollbar-track{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.participant-item{display:flex;align-items:center;justify-content:space-between;margin-right:var(--rtk-space-2, 8px);height:-moz-fit-content;height:fit-content;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.participant-item:hover{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.selector-mode:hover .show-on-hover{display:flex}.message-container{margin:var(--rtk-space-0, 0px);display:flex;width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.message-container p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);height:var(--rtk-space-20, 80px);display:flex;width:100%;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));border-style:dashed;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.message-container p:hover{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.25)}.message-container .drop-zone-active{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.25)}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.show-on-hover{margin-left:var(--rtk-space-4, 16px);height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);display:none}:host(:hover) .show-on-hover{display:flex}.peer-ui-container{position:relative;display:flex;align-items:center;gap:var(--rtk-space-2, 8px);height:var(--rtk-space-10, 40px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.peer-ui-container rtk-avatar{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.peer-ui-container .name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}";
const RtkBreakoutRoomManagerStyle0 = rtkBreakoutRoomManagerCss;

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 ROOM_TITLE_MIN_CHARS = 3;
const RtkBreakoutRoomManager = /*@__PURE__*/ proxyCustomElement(class RtkBreakoutRoomManager extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.onParticipantsAdd = createEvent(this, "participantsAdd", 7);
        this.onParticipantDelete = createEvent(this, "participantDelete", 7);
        this.onRoomJoin = createEvent(this, "roomJoin", 7);
        this.deleteRoom = createEvent(this, "delete", 7);
        this.updateRoom = createEvent(this, "update", 7);
        /** allow room delete */
        this.allowDelete = true;
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        /** Drag mode */
        this.isDragMode = false;
        /** display expanded card by default */
        this.defaultExpanded = false;
        this.editingTitleRoomId = null;
        this.newTitle = null;
        this.showExpandedCard = false;
        this.glowingCard = false;
        this.permissionsUpdateListener = () => {
            this.permissions = this.meeting.self.permissions.connectedMeetings;
        };
        this.reset = () => {
            this.editingTitleRoomId = null;
            this.newTitle = null;
        };
        this.onEditClick = () => {
            if (this.editingTitleRoomId) {
                if (this.newTitle.length < ROOM_TITLE_MIN_CHARS)
                    return;
                this.roomTitle = this.newTitle;
                this.updateRoom.emit({
                    title: this.newTitle,
                    id: this.editingTitleRoomId,
                });
                this.glowCard();
                this.reset();
            }
            else {
                this.editingTitleRoomId = this.room.id;
                writeTask(() => {
                    this.inputTextEl.focus();
                    this.inputTextEl.select();
                });
            }
        };
        this.onDrop = (e) => {
            if (e.currentTarget instanceof HTMLParagraphElement) {
                e.currentTarget.classList.remove('drop-zone-active');
                this.onAssign();
            }
        };
        this.onDragOver = (e) => {
            if (e.currentTarget instanceof HTMLParagraphElement) {
                e.currentTarget.classList.add('drop-zone-active');
                e.preventDefault();
            }
        };
    }
    connectedCallback() {
        var _a;
        this.allParticipants = getAllConnectedParticipants(this.meeting);
        this.permissionsUpdateListener();
        this.showExpandedCard = this.defaultExpanded;
        this.roomTitle = this.room.isParent ? this.t('breakout_rooms.main_room') : (_a = this.room) === null || _a === void 0 ? void 0 : _a.title;
        this.canEditMeetingTitle =
            this.permissions.canAlterConnectedMeetings &&
                !this.room.isParent &&
                !this.meeting.connectedMeetings.isActive; // TODO: remove this once socket supports update meetings
        this.meeting.self.permissions.on('permissionsUpdate', this.permissionsUpdateListener);
    }
    disconnectedCallback() {
        this.meeting.self.permissions.off('permissionsUpdate', this.permissionsUpdateListener);
    }
    onDragLeave(e) {
        if (e.currentTarget instanceof HTMLParagraphElement) {
            e.currentTarget.classList.remove('drop-zone-active');
        }
    }
    getAssignmentHint() {
        if (this.assigningParticipants && this.isDragMode) {
            return this.t('breakout_rooms.drag_drop_participants');
        }
        if (this.assigningParticipants) {
            return this.t('breakout_rooms.click_drop_participants');
        }
        if (this.room.participants.length === 0) {
            return this.t('breakout_rooms.none_assigned');
        }
    }
    toggleCardDisplay() {
        this.showExpandedCard = !this.showExpandedCard;
    }
    glowCard() {
        this.glowingCard = true;
        setTimeout(() => {
            this.glowingCard = false;
        }, 2000);
    }
    onAssign() {
        this.onParticipantsAdd.emit();
        this.glowCard();
    }
    onJoin() {
        this.onRoomJoin.emit();
    }
    onTitleChanged(e) {
        if (e.key === 'Enter') {
            this.newTitle = e.target.value;
            this.onEditClick();
        }
    }
    renderPeer(participant) {
        const { displayPictureUrl: picture } = this.allParticipants.find((p) => participantIdentifier(p) === participantIdentifier(participant));
        const name = formatName(participant.displayName || '');
        return (h("div", { class: "peer-ui-container" }, h("rtk-avatar", { participant: { name, picture }, size: "sm" }), h("p", { class: "name", title: name }, shorten(name, 16), this.meeting.self.userId === participant.id && ` (${this.t('you')})`)));
    }
    renderExpandedCardMaybe() {
        if (!this.showExpandedCard)
            return;
        if (this.room.isParent)
            return;
        if (!this.getAssignmentHint())
            return;
        if (!this.permissions.canAlterConnectedMeetings)
            return;
        return (h("div", { class: "message-container" }, h("p", { class: { 'compact-height': this.room.participants.length !== 0 }, onClick: () => this.onAssign(), onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, this.getAssignmentHint())));
    }
    renderParticipantsMaybe() {
        if (!this.showExpandedCard)
            return;
        if (this.room.isParent)
            return;
        if (this.room.participants.length === 0)
            return;
        return (h("div", { class: "participant-list", onClick: () => {
                this.onAssign();
            } }, this.room.participants.map((participant) => (h("div", { class: "participant-item", role: "listitem", key: participant.id }, this.renderPeer(participant), this.permissions.canAlterConnectedMeetings && (h("rtk-icon", { class: "show-on-hover", icon: this.iconPack.dismiss, onClick: () => {
                this.onParticipantDelete.emit(participant);
            } })))))));
    }
    render() {
        var _a, _b, _c;
        if (!this.meeting || !this.room || !this.permissions)
            return null;
        /* NOTE(ravindra-cloudflare):
         *  Checking if user can switch to this room
         *  Check 1: if user has full access.
         *  Check 2: For non-parent room, user has "switch meeting" access.
         *  Check 3: For parent room, user has "switch to parent meeting" access.
         */
        const canSwitchToThisRoom = this.permissions.canAlterConnectedMeetings ||
            (this.permissions.canSwitchConnectedMeetings && !this.room.isParent) ||
            (this.permissions.canSwitchToParentMeeting && this.room.isParent);
        return (h(Host, null, h("div", { class: {
                'assign-mode': this.assigningParticipants,
                'selector-mode': !this.assigningParticipants,
                'glowing-card': this.glowingCard,
            } }, h("div", { class: "header" }, h("input", { ref: (el) => (this.inputTextEl = el), placeholder: this.t('breakout_rooms.room_name'), disabled: !(this.editingTitleRoomId === this.room.id), value: this.roomTitle, minlength: ROOM_TITLE_MIN_CHARS, onChange: (e) => {
                this.newTitle = e.target.value;
            }, onKeyPress: (e) => this.onTitleChanged(e), class: { 'editing-enabled': this.editingTitleRoomId === this.room.id }, style: { width: `${this.roomTitle.length + 1}ch` } }), this.editingTitleRoomId !== this.room.id && (h("span", { class: "participant-count" }, "(", h("rtk-icon", { icon: this.iconPack.people }), (_c = (_b = (_a = this.room) === null || _a === void 0 ? void 0 : _a.participants) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : '0', ")")), this.canEditMeetingTitle && (h("rtk-tooltip", { label: this.editingTitleRoomId === this.room.id
                ? this.t('breakout_rooms.save_room_name')
                : this.t('breakout_rooms.edit_room_name') }, h("rtk-icon", { icon: this.editingTitleRoomId === this.room.id
                ? this.iconPack.checkmark
                : this.iconPack.edit, class: "show-on-hover", onClick: this.onEditClick }))), h("div", { class: "rooms-container" }, this.permissions.canAlterConnectedMeetings &&
            !this.room.isParent &&
            this.allowDelete && (h("rtk-tooltip", { label: this.t('breakout_rooms.delete'), class: "danger" }, h("rtk-icon", { icon: this.iconPack.delete, class: "show-on-hover", onClick: () => {
                this.deleteRoom.emit();
            } }))), this.assigningParticipants &&
            this.permissions.canAlterConnectedMeetings &&
            !this.room.isParent && (h("rtk-button", { kind: "button", variant: "ghost", class: "assign-button", size: "md", onClick: () => this.onAssign() }, this.t('breakout_rooms.assign'))), this.mode === 'edit' && !this.assigningParticipants && canSwitchToThisRoom && (h("rtk-button", { kind: "button", variant: "ghost", class: "assign-button", size: "md", disabled: this.room.id === this.meeting.meta.meetingId, onClick: () => this.onJoin() }, this.room.id === this.meeting.meta.meetingId ? this.t('joined') : this.t('join'))), !this.room.isParent && (h("rtk-icon", { icon: this.showExpandedCard ? this.iconPack.chevron_up : this.iconPack.chevron_down, onClick: () => this.toggleCardDisplay() })))), this.renderExpandedCardMaybe(), this.renderParticipantsMaybe())));
    }
    static get style() { return RtkBreakoutRoomManagerStyle0; }
}, [1, "rtk-breakout-room-manager", {
        "meeting": [16],
        "assigningParticipants": [4, "assigning-participants"],
        "mode": [1],
        "states": [16],
        "allowDelete": [4, "allow-delete"],
        "iconPack": [16],
        "t": [16],
        "isDragMode": [4, "is-drag-mode"],
        "room": [16],
        "defaultExpanded": [4, "default-expanded"],
        "editingTitleRoomId": [32],
        "newTitle": [32],
        "showExpandedCard": [32],
        "glowingCard": [32]
    }]);
__decorate([
    SyncWithStore()
], RtkBreakoutRoomManager.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkBreakoutRoomManager.prototype, "states", void 0);
__decorate([
    SyncWithStore()
], RtkBreakoutRoomManager.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkBreakoutRoomManager.prototype, "t", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-breakout-room-manager", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-breakout-room-manager":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkBreakoutRoomManager);
            }
            break;
        case "rtk-avatar":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "rtk-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkBreakoutRoomManager as R, defineCustomElement as d };
