import { format } from 'd3-format';
import { html, nothing } from 'lit';
import { query, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { HasSlotController } from '../../internal/slot.mjs';
import { isStringFull, isNil, isNumber, isNumeric } from '../../internal/type-checks.mjs';
import { watch } from '../../internal/watch.mjs';
import styles from './gauge.styles.mjs';

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;
};
const DEFAULT_FORMATTER = (val) => isNil(val) ? "--" : val.toString();
class FlowUiGauge extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "info");
    this._formatter = DEFAULT_FORMATTER;
  }
  connectedCallback() {
    super.connectedCallback();
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  handleFormatChange() {
    if (isStringFull(this.format)) {
      const fn = format(this.format);
      this._formatter = (val) => {
        if (isNil(val)) {
          return "--";
        } else if (isNumber(val) || isNumeric(val)) {
          return fn(+val);
        } else {
          return val;
        }
      };
    } else {
      this._formatter = DEFAULT_FORMATTER;
    }
  }
  showInfoDialog() {
    this._infoDialog && this._infoDialog.show();
  }
  hideInfoDialog() {
    this._infoDialog && this._infoDialog.hide();
  }
  headerIconTemplate() {
    return this.icon ? html`
          <flow-ui-icon
            part="header-icon"
            class="gauge__header-icon"
            name=${this.icon}
            library=${ifDefined(this.iconLibrary)}
          ></flow-ui-icon>
        ` : nothing;
  }
  infoButtonTemplate() {
    return html`
      <flow-ui-icon-button
        part="info-button"
        class="gauge__header-button"
        name="circle-info"
        library="system"
        @click=${this.showInfoDialog}
      ></flow-ui-icon-button>
    `;
  }
  infoDialogTemplate() {
    return html`
      <flow-ui-dialog class="gauge__info-dialog">
        <div slot="title" class="gauge__info-dialog-heading">${this.headerIconTemplate()} ${this.title}</div>
        <slot name="info"></slot>
        <div slot="footer">
          <flow-ui-button autofocus slot="footer" variant="primary" @click=${this.hideInfoDialog}>OK</flow-ui-button>
        </div>
      </flow-ui-dialog>
    `;
  }
  render() {
    const hasInfo = this.hasSlotController.test("info");
    return html`
      <div
        part="base"
        class=${classMap({
      gauge: true
    })}
        title=""
      >
        <div part="header" class="gauge__header">
          ${this.headerIconTemplate()}
          <span class="gauge__title-wrapper">
            <span part="title" class="gauge__title">
              <slot name="title">${this.title}</slot>
            </span>
          </span>
          ${hasInfo ? this.infoButtonTemplate() : nothing}
        </div>
        <div part="body" class="gauge__body">
          <span part="value" class="gauge__value">
            <slot name="value">${this._formatter(this.value)}</slot>
          </span>
          <span part="units" class="gauge__units">
            <slot name="units">${this.units}</slot>
          </span>
          <span class="gauge__spacer"></span>
        </div>
      </div>
      ${hasInfo ? this.infoDialogTemplate() : nothing}
    `;
  }
}
FlowUiGauge.styles = styles;
__decorateClass([
  query(".gauge__info-dialog")
], FlowUiGauge.prototype, "_infoDialog", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiGauge.prototype, "title", 2);
__decorateClass([
  property()
], FlowUiGauge.prototype, "units", 2);
__decorateClass([
  property()
], FlowUiGauge.prototype, "value", 2);
__decorateClass([
  property()
], FlowUiGauge.prototype, "icon", 2);
__decorateClass([
  property({ attribute: "icon-library" })
], FlowUiGauge.prototype, "iconLibrary", 2);
__decorateClass([
  property()
], FlowUiGauge.prototype, "format", 2);
__decorateClass([
  watch("format")
], FlowUiGauge.prototype, "handleFormatChange", 1);

export { FlowUiGauge as default };
