import{A as d,b as i,a as p,n}from"./property-ChPqBGW_.js";import{t as b}from"./custom-element-C-crYl4r.js";import{r as u}from"./state-BnFRu-9h.js";import{b as v}from"./tokens-BNnjLb74.js";import{R as g,l as m,m as f,n as S,o as w,s as y,d as C}from"./selectors-Da9iPvcy.js";import{g as E}from"./actions-YOzDHBVE.js";import"./mb-icon-button-BTBZ5ktJ.js";import{B as _}from"./base-element-8qyqvBFG.js";import{S as V}from"./store-controller-z1N-z-2D.js";import"./index-DWRYsVdq.js";import"./websocket-client-DkWX_K5z.js";class B{constructor(e,c={}){this.host=e,this.options=c,this.unsubscribes=[],this._isAudioEnabled=!1,this._isVideoEnabled=!1,this._isScreenEnabled=!1,this._isConnected=!1,this.host.addController(this),this.store=g.getInstance(c.storeId),this.actions=E(c.storeId)}get isAudioEnabled(){return this._isAudioEnabled}get isVideoEnabled(){return this._isVideoEnabled}get isScreenEnabled(){return this._isScreenEnabled}get isConnected(){return this._isConnected}get canToggle(){return this._isConnected}toggleAudio(){this.canToggle&&this.actions.toggleAudio()}toggleVideo(){this.canToggle&&this.actions.toggleVideo()}toggleScreen(){this.canToggle&&this.actions.toggleScreenShare()}setAudio(e){this.canToggle&&this.actions.setAudioEnabled(e)}setVideo(e){this.canToggle&&this.actions.setVideoEnabled(e)}setScreen(e){this.canToggle&&this.actions.setScreenShareEnabled(e)}hostConnected(){const e=this.store.subscribeWithSelector(m,r=>{const l=this._isAudioEnabled;this._isAudioEnabled=r,l!==r&&this.options.onAudioToggle?.(r),this.host.requestUpdate()});this.unsubscribes.push(e);const c=this.store.subscribeWithSelector(f,r=>{const l=this._isVideoEnabled;this._isVideoEnabled=r,l!==r&&this.options.onVideoToggle?.(r),this.host.requestUpdate()});this.unsubscribes.push(c);const h=this.store.subscribeWithSelector(S,r=>{const l=this._isScreenEnabled;this._isScreenEnabled=r,l!==r&&this.options.onScreenToggle?.(r),this.host.requestUpdate()});this.unsubscribes.push(h);const a=this.store.subscribeWithSelector(w,r=>{this._isConnected=r,this.host.requestUpdate()});this.unsubscribes.push(a)}hostDisconnected(){this.unsubscribes.forEach(e=>e()),this.unsubscribes=[]}}var x=Object.defineProperty,M=Object.getOwnPropertyDescriptor,s=(t,e,c,h)=>{for(var a=h>1?void 0:h?M(e,c):e,r=t.length-1,l;r>=0;r--)(l=t[r])&&(a=(h?l(e,c,a):l(a))||a);return h&&a&&x(e,c,a),a};let o=class extends _{constructor(){super("MbControls"),this.layout="horizontal",this.position="bottom",this.showAudio=!0,this.showVideo=!0,this.showScreen=!1,this.showLeave=!0,this.showMore=!1,this.compact=!1,this.transparent=!1,this.showRecording=!1,this.recording=!1,this.hostOnlyRecording=!1,this.isHost=!1,this.canRecord=!0,this.avToggle=new B(this,{storeId:this.storeId,onAudioToggle:t=>{this.dispatchEvent(new CustomEvent("audio-toggle",{detail:{enabled:t}}))},onVideoToggle:t=>{this.dispatchEvent(new CustomEvent("video-toggle",{detail:{enabled:t}}))},onScreenToggle:t=>{this.dispatchEvent(new CustomEvent("screen-toggle",{detail:{enabled:t}}))}})}connectedCallback(){super.connectedCallback(),this.setupStoreController()}setupStoreController(){if(!this.storeId)return;const t=g.getInstance(this.storeId);this.storeCtrl=new V(this,t),t.subscribeWithSelector(y,e=>{this.isHost=e?.role==="host",this.updateCanRecord()}),t.subscribeWithSelector(C,e=>{this.hostOnlyRecording=e,this.updateCanRecord()})}updateCanRecord(){this.hostOnlyRecording?this.canRecord=this.isHost:this.canRecord=!0}handleAudioClick(){this.avToggle.toggleAudio()}handleVideoClick(){this.avToggle.toggleVideo()}handleScreenClick(){this.avToggle.toggleScreen()}handleLeaveClick(){this.dispatchEvent(new CustomEvent("leave",{bubbles:!0,composed:!0}))}handleMoreClick(){this.dispatchEvent(new CustomEvent("more",{bubbles:!0,composed:!0}))}handleRecordingClick(){this.recording=!this.recording,this.dispatchEvent(new CustomEvent("recording-toggle",{detail:{recording:this.recording}}))}render(){return i`
      <div class="controls-container">
        <!-- Start section -->
        <div class="section section-start">
          <slot name="start"></slot>
        </div>

        ${this.hasStartSlot()?i`<div class="divider"></div>`:d}

        <!-- Center section -->
        <div class="section section-center">
          <slot name="center">
            ${this.showAudio?this.renderAudioButton():d}
            ${this.showVideo?this.renderVideoButton():d}
            ${this.showScreen?this.renderScreenButton():d}
            ${this.showRecording&&this.canRecord?this.renderRecordingButton():d}
          </slot>
        </div>

        ${this.showLeave||this.hasEndSlot()?i`<div class="divider"></div>`:d}

        <!-- End section -->
        <div class="section section-end">
          ${this.showLeave?this.renderLeaveButton():d}
          ${this.showMore?this.renderMoreButton():d}
          <slot name="end"></slot>
        </div>
      </div>
    `}hasStartSlot(){return this.querySelector('[slot="start"]')!==null}hasEndSlot(){return this.querySelector('[slot="end"]')!==null}renderAudioButton(){const t=!this.avToggle.isAudioEnabled,e=this.audioTooltip||(t?"Unmute":"Mute");return i`
      <slot name="audio">
        <mb-icon-button
          class="${t?"muted":""}"
          tooltip=${e}
          @click=${this.handleAudioClick}
        >
          ${t?this.renderMicOffIcon():this.renderMicOnIcon()}
        </mb-icon-button>
      </slot>
    `}renderVideoButton(){const t=!this.avToggle.isVideoEnabled,e=this.videoTooltip||(t?"Start video":"Stop video");return i`
      <slot name="video">
        <mb-icon-button
          class="${t?"muted":""}"
          tooltip=${e}
          @click=${this.handleVideoClick}
        >
          ${t?this.renderVideoOffIcon():this.renderVideoOnIcon()}
        </mb-icon-button>
      </slot>
    `}renderScreenButton(){const t=this.avToggle.isScreenEnabled;return i`
      <slot name="screen">
        <mb-icon-button
          ?active=${t}
          tooltip=${t?"Stop sharing":"Share screen"}
          @click=${this.handleScreenClick}
        >
          ${this.renderScreenIcon()}
        </mb-icon-button>
      </slot>
    `}renderRecordingButton(){const t=this.recording;return i`
      <slot name="recording">
        <mb-icon-button
          ?active=${t}
          tooltip=${t?"Stop recording":"Start recording"}
          @click=${this.handleRecordingClick}
        >
          ${this.renderRecordingIcon(t)}
        </mb-icon-button>
      </slot>
    `}renderLeaveButton(){return i`
      <slot name="leave">
        <mb-icon-button
          class="danger"
          tooltip="Leave"
          @click=${this.handleLeaveClick}
        >
          ${this.renderLeaveIcon()}
        </mb-icon-button>
      </slot>
    `}renderMoreButton(){return i`
      <mb-icon-button
        tooltip="More"
        @click=${this.handleMoreClick}
      >
        ${this.renderMoreIcon()}
      </mb-icon-button>
    `}renderMicOnIcon(){return i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z"/>
      </svg>
    `}renderMicOffIcon(){return i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
      </svg>
    `}renderVideoOnIcon(){return i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
      </svg>
    `}renderVideoOffIcon(){return i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"/>
      </svg>
    `}renderScreenIcon(){return i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
      </svg>
    `}renderRecordingIcon(t){return t?i`
        <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
          <circle cx="12" cy="12" r="8"/>
        </svg>
      `:i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
      </svg>
    `}renderLeaveIcon(){return i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.68-1.36-2.66-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/>
      </svg>
    `}renderMoreIcon(){return i`
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
        <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
      </svg>
    `}};o.styles=[v,p`
      :host {
        --_bg: var(--monibuca-controls-bg, rgba(0, 0, 0, 0.6));
        --_padding: var(--monibuca-controls-padding, var(--monibuca-spacing-sm));
        --_gap: var(--monibuca-controls-gap, var(--monibuca-spacing-sm));
        --_radius: var(--monibuca-controls-radius, var(--monibuca-radius-lg));
        
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--_padding);
        background: var(--_bg);
        border-radius: var(--_radius);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .controls-container {
        display: flex;
        align-items: center;
        gap: var(--_gap);
      }

      /* Layout variants */
      :host([layout="vertical"]) {
        flex-direction: column;
      }

      :host([layout="vertical"]) .controls-container {
        flex-direction: column;
      }

      /* Position variants */
      :host([position="bottom"]) {
        border-radius: var(--_radius) var(--_radius) 0 0;
      }

      :host([position="top"]) {
        border-radius: 0 0 var(--_radius) var(--_radius);
      }

      :host([position="float"]) {
        border-radius: var(--_radius);
        box-shadow: var(--monibuca-shadow-lg);
      }

      /* Sections */
      .section {
        display: flex;
        align-items: center;
        gap: var(--_gap);
      }

      .section-start,
      .section-end {
        flex-shrink: 0;
      }

      .section-center {
        display: flex;
        align-items: center;
        gap: var(--_gap);
      }

      .divider {
        width: 1px;
        height: 24px;
        background: rgba(255, 255, 255, 0.2);
        margin: 0 var(--monibuca-spacing-xs);
      }

      :host([layout="vertical"]) .divider {
        width: 24px;
        height: 1px;
      }

      /* Button styles */
      mb-icon-button {
        --monibuca-icon-btn-bg: rgba(255, 255, 255, 0.1);
        --monibuca-icon-btn-hover-bg: rgba(255, 255, 255, 0.2);
        --monibuca-icon-btn-color: white;
      }

      mb-icon-button[active] {
        --monibuca-icon-btn-bg: var(--monibuca-color-primary);
      }

      mb-icon-button.danger {
        --monibuca-icon-btn-bg: var(--monibuca-color-error);
        --monibuca-icon-btn-hover-bg: var(--monibuca-color-error-hover);
      }

      mb-icon-button.muted {
        --monibuca-icon-btn-bg: var(--monibuca-color-error);
      }

      /* Compact mode */
      :host([compact]) {
        --_padding: var(--monibuca-spacing-xs);
        --_gap: var(--monibuca-spacing-xs);
      }

      :host([compact]) mb-icon-button {
        --monibuca-icon-btn-size: var(--monibuca-icon-btn-size-sm);
      }

      /* Transparent mode */
      :host([transparent]) {
        --_bg: transparent;
        backdrop-filter: none;
      }

      /* Hidden state */
      :host([hidden]) {
        display: none;
      }
    `];s([n({type:String,attribute:"store-id"})],o.prototype,"storeId",2);s([n({type:String,reflect:!0})],o.prototype,"layout",2);s([n({type:String,reflect:!0})],o.prototype,"position",2);s([n({type:Boolean,attribute:"show-audio"})],o.prototype,"showAudio",2);s([n({type:Boolean,attribute:"show-video"})],o.prototype,"showVideo",2);s([n({type:Boolean,attribute:"show-screen"})],o.prototype,"showScreen",2);s([n({type:Boolean,attribute:"show-leave"})],o.prototype,"showLeave",2);s([n({type:Boolean,attribute:"show-more"})],o.prototype,"showMore",2);s([n({type:Boolean,reflect:!0})],o.prototype,"compact",2);s([n({type:Boolean,reflect:!0})],o.prototype,"transparent",2);s([n({type:String,attribute:"audio-tooltip"})],o.prototype,"audioTooltip",2);s([n({type:String,attribute:"video-tooltip"})],o.prototype,"videoTooltip",2);s([n({type:Boolean,attribute:"show-recording"})],o.prototype,"showRecording",2);s([n({type:Boolean,reflect:!0})],o.prototype,"recording",2);s([n({type:Boolean,attribute:"host-only-recording"})],o.prototype,"hostOnlyRecording",2);s([u()],o.prototype,"isHost",2);s([u()],o.prototype,"canRecord",2);o=s([b("mb-controls")],o);export{o as MbControls};
