import { c as h } from "../../chunks/runtime.js";
import { html as c } from "lit";
import o from "@arcgis/core/Color.js";
import { watch as m } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as p } from "@arcgis/lumina";
import { useDirection as $ } from "@arcgis/lumina/controllers";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.34/esri/copyright.txt for details.
v4.34.7 */
const v = ["Auto"], _ = [
  { label: "0.25x", value: 0.25 },
  { label: "0.5x", value: 0.5 },
  { label: "1x", value: 1 },
  { label: "1.5x", value: 1.5 },
  { label: "2x", value: 2 }
], a = new o([255, 127, 0]);
class u extends p {
  constructor() {
    super(...arguments), this._color = null, this._speed = "1x", this._quality = "Auto", this._direction = $(), this._disabled = !1;
  }
  static {
    this.properties = { _disabled: 16, _active: 16, viewModel: 0, messages: 0 };
  }
  loaded() {
    this.manager.onLifecycle(() => [
      m(() => this.viewModel.state, (i) => {
        this._disabled = i === "not-ready" || i === "waiting";
      }, { initial: !0 })
    ]);
  }
  render() {
    const { viewModel: i, messages: e } = this, s = this._direction === "rtl" ? "chevron-left" : "chevron-right", n = c`<calcite-flow-item .heading=${e.playbackSpeed} .selected=${this._active === "speed"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.playbackSpeed} selection-mode=single-persist>${_.map(({ label: t, value: l }) => c`<calcite-list-item .disabled=${i?.layer?.isLive && l !== 1} .label=${t} @click=${() => {
      this._speed = t, i.changePlaybackSpeed(l);
    }} .selected=${t === this._speed}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, r = c`<calcite-flow-item .heading=${e.quality} .selected=${this._active === "quality"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.quality} selection-mode=single-persist>${v.map((t) => c`<calcite-list-item .label=${t} @click=${() => this._quality = t} .selected=${t === this._quality}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, d = c`<calcite-flow-item .heading=${e.graphics} .selected=${this._active === "color"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-block .heading=${e.color} expanded><calcite-color-picker channels-disabled format=hex saved-disabled scale=s .value=${this._color?.toHex() ?? a.toHex()} @calciteColorPickerChange=${({ currentTarget: t }) => {
      const l = t.value?.toString() ?? null;
      this._color = l ? new o(l) : null, this._color && i.changeGraphicsColor(this._color);
    }}></calcite-color-picker></calcite-block></calcite-flow-item>`;
    return c`<div><calcite-popover auto-close .label=${e.settings} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=settings-action scale=s @calcitePopoverClose=${() => this._active = void 0}><calcite-flow><calcite-flow-item heading=Settings .selected=${!this._active}><calcite-list .label=${e.settings}><calcite-list-item .label=${e.speed} @click=${() => this._active = "speed"}><div slot=content-end><calcite-chip .label=${this._speed} scale=s>${this._speed}</calcite-chip></div><calcite-icon .icon=${s} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.quality} @click=${() => this._active = "quality"}><div slot=content-end><calcite-chip .label=${this._quality} scale=s>${this._quality}</calcite-chip></div><calcite-icon .icon=${s} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.graphics} @click=${() => this._active = "color"}><calcite-color-picker-swatch .color=${this._color?.toString() ?? a.toString()} scale=s slot=content-end></calcite-color-picker-swatch><calcite-icon .icon=${s} scale=s slot=content-end></calcite-icon></calcite-list-item></calcite-list></calcite-flow-item>${this._active === "speed" ? n : null}${this._active === "quality" ? r : null}${this._active === "color" ? d : null}</calcite-flow></calcite-popover><calcite-action alignment=center .disabled=${this._disabled} icon=sliders id=settings-action scale=s slot=trigger .text=${e.settings}></calcite-action></div>`;
  }
}
h("arcgis-video-player-settings", u);
export {
  u as VideoPlayerSettings
};
