import { Chart } from 'chart.js';
import { html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { watch } from '../../internal/watch.mjs';
import styles from './chart.styles.mjs';
import { HasSlotController } from '../../internal/slot.mjs';
import { isStringFull } from '../../internal/type-checks.mjs';
import { initializeChartJs } from './chartjs-support.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;
};
class FlowUiChart extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "label");
    this._chartRef = createRef();
    this.title = "";
    this.plugins = [];
  }
  /** The Chart.js chart instance. */
  get chart() {
    return this._chart;
  }
  repaint() {
    if (this._chart) {
      this._chart.data = this.data;
      this._chart.options = this.options;
      this._chart.update();
    }
  }
  async connectedCallback() {
    super.connectedCallback();
    initializeChartJs();
    await this.updateComplete;
    this._chart = new Chart(this._chartRef.value, {
      type: this.type,
      data: this.data,
      options: this.options,
      plugins: this.plugins
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    if (this._chart) {
      this._chart.destroy();
      this._chart = void 0;
    }
  }
  render() {
    const hasHeader = isStringFull(this.title) || this.hasSlotController.test("title");
    return html`
      <div part="base" class="chart" title="">
        ${hasHeader ? html`
              <header part="header" class="chart__header">
                <span part="title" class="chart__title"><slot name="title">${this.title}</slot></span>
              </header>
            ` : nothing}

        <div class="chart_container">
          <canvas ${ref(this._chartRef)}></canvas>
        </div>
      </div>
    `;
  }
}
FlowUiChart.styles = styles;
__decorateClass([
  property({ reflect: true })
], FlowUiChart.prototype, "title", 2);
__decorateClass([
  property()
], FlowUiChart.prototype, "type", 2);
__decorateClass([
  property({ attribute: false })
], FlowUiChart.prototype, "options", 2);
__decorateClass([
  property({ attribute: false })
], FlowUiChart.prototype, "data", 2);
__decorateClass([
  property({ type: Array })
], FlowUiChart.prototype, "plugins", 2);
__decorateClass([
  watch(["options", "data"], { waitUntilFirstUpdate: true })
], FlowUiChart.prototype, "repaint", 1);

export { FlowUiChart as default };
