import { SkinMixin, createStyles } from "../skin-mixin.js";
import { renderIcon } from "../../icons/dist/render/minimal/index.js";
import "../media/container.js";
import "../ui/mute-button.js";
import "../ui/play-button.js";
import "../ui/playback-rate-button.js";
import "../ui/popover.js";
import "../ui/seek-button.js";
import "../ui/time.js";
import "../ui/time-slider.js";
import "../ui/tooltip.js";
import "../ui/tooltip-group.js";
import "../ui/volume-slider.js";
import minimal_skin_default from "../../_virtual/inline-css_src/define/audio/minimal-skin.js";
import { ReactiveElement } from "@videojs/element";

//#region src/define/audio/minimal-skin.ts
const SEEK_TIME = 10;
function getTemplateHTML() {
	return `
    <media-container class="media-minimal-skin media-minimal-skin--audio">
      <slot name="media"></slot>

      <div class="media-controls">
        <media-tooltip-group>
          <div class="media-button-group">
            <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
              ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
              ${renderIcon("play", { class: "media-icon media-icon--play" })}
              ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
            </media-play-button>
            <media-tooltip id="play-tooltip" side="top" class="media-tooltip">
              <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
              <span class="media-tooltip-label media-tooltip-label--play">Play</span>
              <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
            </media-tooltip>

            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
              <span class="media-icon__container">
                ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })}
                <span class="media-icon__label">${SEEK_TIME}</span>
              </span>
            </media-seek-button>
            <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
              Seek backward ${SEEK_TIME} seconds
            </media-tooltip>

            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
              <span class="media-icon__container">
                ${renderIcon("seek", { class: "media-icon media-icon--seek" })}
                <span class="media-icon__label">${SEEK_TIME}</span>
              </span>
            </media-seek-button>
            <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
              Seek forward ${SEEK_TIME} seconds
            </media-tooltip>
          </div>

          <div class="media-time-controls">
            <media-time-group class="media-time">
              <media-time type="current" class="media-time__value media-time__value--current"></media-time>
              <media-time-separator class="media-time__separator"></media-time-separator>
              <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
            </media-time-group>

            <media-time-slider class="media-slider">
              <media-slider-track class="media-slider__track">
                <media-slider-fill class="media-slider__fill"></media-slider-fill>
                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
              </media-slider-track>
              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
            </media-time-slider>
          </div>

          <div class="media-button-group">
            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate">
            </media-playback-rate-button>
            <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
              Toggle playback rate
            </media-tooltip>

            <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
              ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
              ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
              ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
            </media-mute-button>

            <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume">
              <media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
                <media-slider-track class="media-slider__track">
                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
                </media-slider-track>
                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
              </media-volume-slider>
            </media-popover>
          </div>
        </media-tooltip-group>
      </div>
    </media-container>
  `;
}
var MinimalAudioSkinElement = class extends SkinMixin(ReactiveElement) {
	static {
		this.tagName = "audio-minimal-skin";
	}
	static {
		this.styles = createStyles(minimal_skin_default);
	}
	static {
		this.getTemplateHTML = getTemplateHTML;
	}
};
customElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);

//#endregion
export { MinimalAudioSkinElement };
//# sourceMappingURL=minimal-skin.js.map