/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { css as a, html as i } from "lit";
import n from "@arcgis/core/views/interactive/sketch/SketchOptions.js";
import { LitElement as c, nothing as r } from "@arcgis/lumina";
import { usePropertyChange as d } from "@arcgis/lumina/controllers";
import { u as h } from "../../chunks/useT9n.js";
import { V as s } from "../../chunks/visible-element.js";
const b = a`.root{display:flex;flex-flow:column wrap;min-width:100%;& calcite-label:last-child{--calcite-label-margin-bottom: 0}}.block{border-block-end:none;margin:0}.block-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-xs, 6px)}.radio-button-label-wrapper{align-items:center;display:flex;gap:var(--calcite-space-base, 2px)}`;
class p extends c {
  constructor() {
    super(...arguments), this.messages = h({ blocking: !0 }), this.showHeader = !1, this.hideTooltipsToggle = !1, this.hideLabelsToggle = !1, this.showDirectionModePicker = !1, this.sketchOptions = new n(), this.arcgisPropertyChange = d()("tooltipsEnabled", "labelsEnabled", "directionMode");
  }
  static {
    this.properties = { _hasContent: 32, showHeader: 5, label: 1, hideTooltipsToggle: 5, hideLabelsToggle: 5, showDirectionModePicker: 5, sketchOptions: 0, tooltipsEnabled: 5, labelsEnabled: 5, directionMode: 1 };
  }
  static {
    this.styles = b;
  }
  get _hasContent() {
    return !this.hideTooltipsToggle || !this.hideLabelsToggle || this.showDirectionModePicker;
  }
  get tooltipsEnabled() {
    return this.sketchOptions.tooltips.enabled;
  }
  set tooltipsEnabled(e) {
    this.sketchOptions.tooltips.enabled = e;
  }
  get labelsEnabled() {
    return this.sketchOptions.labels.enabled;
  }
  set labelsEnabled(e) {
    this.sketchOptions.labels.enabled = e;
  }
  get directionMode() {
    return this.sketchOptions.values.directionMode;
  }
  set directionMode(e) {
    this.sketchOptions.values.directionMode = e;
  }
  _onDirectionModeChange(e) {
    this.sketchOptions.values.directionMode = e.currentTarget.selectedItem?.value;
  }
  render() {
    const { label: e, messages: t } = this, o = e ?? t.componentLabel;
    return i`<div aria-label=${o ?? r} class="root">${this._hasContent ? i`<calcite-block class="block" expanded .heading=${this.showHeader ? e : ""} .label=${o ?? ""}><div class="block-content">${s({ hidden: this.hideTooltipsToggle, children: this._renderTooltipsToggle() })}${s({ hidden: this.hideLabelsToggle, children: this._renderLabelsToggle() })}${s({ hidden: !this.showDirectionModePicker, children: this._renderDirectionModePicker() })}</div></calcite-block>` : void 0}</div>`;
  }
  _renderTooltipsToggle() {
    const { messages: e } = this;
    return i`<arcgis-labeled-switch .checked=${this.sketchOptions.tooltips.effectiveEnabled} .hint=${e.tooltipsToggleHint} .label=${e.tooltipsToggle} @arcgisCheckedChanged=${(t) => {
      this.sketchOptions.tooltips.enabled = t.detail;
    }} .disabled=${this.sketchOptions.tooltips.forceEnabled}></arcgis-labeled-switch>`;
  }
  _renderLabelsToggle() {
    const { messages: e } = this;
    return i`<arcgis-labeled-switch .checked=${this.sketchOptions.labels.enabled} .hint=${e.labelsToggleHint} .label=${e.labelsToggle} @arcgisCheckedChanged=${(t) => {
      this.sketchOptions.labels.enabled = t.detail;
    }}></arcgis-labeled-switch>`;
  }
  _renderDirectionModePicker() {
    const { messages: e } = this, { directionMode: t } = this.sketchOptions.values;
    return i`<calcite-label layout=default scale=s>${e.directionModePicker}<calcite-radio-button-group name=direction-mode layout=horizontal scale=s @calciteRadioButtonGroupChange=${this._onDirectionModeChange}>${this._renderDirectionModeOption("relative", t, e.directionModeRelative)}${this._renderDirectionModeOption("absolute", t, e.directionModeAbsolute)}</calcite-radio-button-group></calcite-label>`;
  }
  _renderDirectionModeOption(e, t, o) {
    return i`<calcite-label layout=inline scale=s><calcite-radio-button .checked=${e === t} scale=s .value=${e}></calcite-radio-button><div class="radio-button-label-wrapper"><calcite-icon .icon=${`${e}-direction`} scale=s></calcite-icon>${o}</div></calcite-label>`;
  }
}
l("arcgis-sketch-tooltip-controls", p);
export {
  p as ArcgisSketchTooltipControls
};
