import { unsafeCSS, LitElement, html, nothing } from "lit";
import { customElement } from "../../decorator.js";
import componentStyle from "./audio-recording-item.css.js";
import { property, state, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import "../icon-button/icon-button.js";
import "../slider/slider.js";
import "../../icons/icon-media-pause.js";
import "../../icons/icon-media-play.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var AudioRecordingStatus = /* @__PURE__ */ ((AudioRecordingStatus2) => {
  AudioRecordingStatus2["Recording"] = "recording";
  AudioRecordingStatus2["Paused"] = "paused";
  AudioRecordingStatus2["Playback"] = "playback";
  return AudioRecordingStatus2;
})(AudioRecordingStatus || {});
let ObcAudioRecordingItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.audioLevels = [];
    this.duration = 0;
    this.status = "recording";
    this.playbackPosition = 0;
    this.isPlaying = false;
    this.enhanced = false;
    this.barCount = 40;
    this.resizeObserverConnected = false;
  }
  getCssVar(name, fallback) {
    const styles = getComputedStyle(this);
    return parseFloat(styles.getPropertyValue(name)) || fallback;
  }
  firstUpdated() {
    this.setupResizeObserver();
  }
  async updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has("status")) {
      await this.updateComplete;
      this.connectResizeObserver();
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.resizeObserver?.disconnect();
    this.resizeObserverConnected = false;
  }
  setupResizeObserver() {
    this.resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const width = entry.contentRect.width;
        const barWidth = this.getCssVar(
          "--ui-components-audio-input-dot-size",
          4
        );
        const barGap = this.getCssVar("--ui-components-audio-input-spacing", 4);
        const newBarCount = Math.max(
          1,
          Math.floor(width / (barWidth + barGap))
        );
        if (newBarCount !== this.barCount) {
          this.barCount = newBarCount;
        }
      }
    });
    this.connectResizeObserver();
  }
  connectResizeObserver() {
    if (this.audioRecordingContainer && this.resizeObserver) {
      if (!this.resizeObserverConnected) {
        this.resizeObserver.observe(this.audioRecordingContainer);
        this.resizeObserverConnected = true;
      }
    } else if (this.resizeObserverConnected && this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserverConnected = false;
    }
  }
  formatDuration(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
  }
  handleStatusToggle() {
    this.dispatchEvent(
      new CustomEvent("status-toggle", {
        detail: { isPlaying: !this.isPlaying },
        bubbles: true,
        composed: true
      })
    );
  }
  renderWaveform() {
    const bars = [];
    const levelCount = this.audioLevels.length;
    const barsToShow = Math.min(levelCount, this.barCount);
    const dotCount = Math.max(0, this.barCount - levelCount);
    const minBarHeight = this.getCssVar(
      "--ui-components-audio-input-dot-size",
      4
    );
    const maxBarHeight = this.getCssVar(
      "--ui-components-audio-input-max-bar-height",
      22
    );
    for (let i = 0; i < dotCount; i++) {
      bars.push(html`<div class="waveform-dot"></div>`);
    }
    const startIndex = levelCount - barsToShow;
    for (let i = 0; i < barsToShow; i++) {
      const level = Math.max(0, Math.min(1, this.audioLevels[startIndex + i]));
      const height = minBarHeight + level * (maxBarHeight - minBarHeight);
      bars.push(
        html`<div class="waveform-bar" style="height: ${height}px"></div>`
      );
    }
    return html`<div class="waveform-container">${bars}</div>`;
  }
  renderPlaybackSlider() {
    return html`
      <obc-slider
        class="playback-slider"
        .value=${this.playbackPosition * 100}
        .min=${0}
        .max=${100}
        .step=${0.1}
        variant="no-input"
        hugcontainer
      ></obc-slider>
    `;
  }
  render() {
    const isRecording = this.status === "recording";
    const isPaused = this.status === "paused";
    const isPlayback = this.status === "playback";
    return html`
      <div
        class=${classMap({
      wrapper: true,
      recording: isRecording,
      paused: isPaused,
      playback: isPlayback,
      enhanced: this.enhanced
    })}
      >
        <div class="recording-container">
          ${isPlayback ? html`
                <obc-icon-button
                  class="status-toggle-button"
                  variant="normal"
                  cornerLeft
                  @click=${this.handleStatusToggle}
                  aria-label=${this.isPlaying ? "Pause" : "Play"}
                >
                  ${this.isPlaying ? html`<obi-media-pause></obi-media-pause>` : html`<obi-media-play></obi-media-play>`}
                </obc-icon-button>
              ` : nothing}
          ${isPlayback ? this.renderPlaybackSlider() : html`<div class="audio-recording-container">
                ${this.renderWaveform()}
              </div>`}
          <div class="duration-container">
            <span class="duration-label"
              >${this.formatDuration(this.duration)}</span
            >
          </div>
        </div>
      </div>
    `;
  }
};
ObcAudioRecordingItem.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: Array })
], ObcAudioRecordingItem.prototype, "audioLevels", 2);
__decorateClass([
  property({ type: Number })
], ObcAudioRecordingItem.prototype, "duration", 2);
__decorateClass([
  property({ type: String })
], ObcAudioRecordingItem.prototype, "status", 2);
__decorateClass([
  property({ type: Number })
], ObcAudioRecordingItem.prototype, "playbackPosition", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAudioRecordingItem.prototype, "isPlaying", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAudioRecordingItem.prototype, "enhanced", 2);
__decorateClass([
  state()
], ObcAudioRecordingItem.prototype, "barCount", 2);
__decorateClass([
  query(".audio-recording-container")
], ObcAudioRecordingItem.prototype, "audioRecordingContainer", 2);
ObcAudioRecordingItem = __decorateClass([
  customElement("obc-audio-recording-item")
], ObcAudioRecordingItem);
export {
  AudioRecordingStatus,
  ObcAudioRecordingItem
};
//# sourceMappingURL=audio-recording-item.js.map
