/**
 * @license
 * Copyright 2022 Superflow.dev
 * SPDX-License-Identifier: MIT
 */

import {LitElement, html, css, PropertyValueMap} from 'lit';
import {customElement, query, property} from 'lit/decorators.js';
import {Chart, ChartItem, registerables} from 'chart.js';
// import {customElement, query, queryAssignedElements, property} from 'lit/decorators.js';
// import {SfISelect} from 'sf-i-select';
// import {SfISubSelect} from 'sf-i-sub-select';
// import {customElement, query, property} from 'lit/decorators.js';
import Util from './util';
// import {LitElement, html, css} from 'lit';
// import {customElement} from 'lit/decorators.js';


/*

Modes: View, Add, Edit, Delete, Admin
DB: partitionKey, rangeKey, values

*/

/**
 * SfChartBar element.
 * @fires renderComplete - When the list is populated
 * @fires valueChanged - When the value is changed
 * @property apiId - backend api id
 * @property label - input label
 * @property name - name of the input
 * @property mode - mode of operation
 * @property selectedId - id to preselect
 * @property selectedValue - callback function
 */
@customElement('sf-chart-bar')
export class SfChartBar extends LitElement {

  @property()
  type: any = null;

  @property()
  data: any = null;

  @property()
  displayLegend: string = "yes";

  @property()
  displayScaleX: string = "yes";

  @property()
  displayScaleY: string = "yes";

  @property()
  displayGridX: string = "yes";

  @property()
  displayGridY: string = "yes";

  @property()
  stackedX: string = "yes";

  @property()
  stackedY: string = "yes";

  @property()
  indexAxis: string = "x";

  getData = () => {
    console.log(this.data)
    return JSON.parse(this.data);
  }
  
  @property()
  labels: any = null;

  getLabels = () => {
    return JSON.parse(this.labels);
  }

  @property()
  chart: any = null;

  static override styles = css`

    
    .SfChartBarC {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
    }


  `;

  @query('#myChart')
  myChart: any;

  prepareXhr = async (data: any, url: string, loaderElement: any, authorization: any) => {
    
    if(loaderElement != null) {
      loaderElement.innerHTML = '<div class="lds-dual-ring"></div>';
    }
    return await Util.callApi(url, data, authorization);

  }


  renderChart = () => {

    if(this.chart != null) {
      (this.chart as Chart).destroy();
    }

    const ctx = this.myChart as ChartItem;

    console.log('data', this.getData());
    
    this.chart = new Chart(ctx, {
      type: this.type,
      data: {
        labels: this.getLabels(),
        datasets: this.getData()
      },
      options: {
        indexAxis: this.indexAxis,
        onClick: ({}={}, array: any) => {
          const ev = new CustomEvent("barClicked", {detail: array, bubbles: true, composed: true});
          this.dispatchEvent(ev);
        },
        plugins: {
          legend: {
              display: this.displayLegend == "yes" ? true : false
          }
        },
        scales: {
          x: {
            display: this.displayScaleX == "yes" ? true : false,
            grid: {
              display: this.displayGridX == "yes" ? true : false
            },
            stacked: this.stackedX == "yes" ? true : false,
          },
          y: {
            display: this.displayScaleY == "yes" ? true : false,
            grid: {
              display: this.displayGridY == "yes" ? true : false
            },
            stacked:  this.stackedY == "yes" ? true : false,
          }
        }
      }
    });

  }

  loadMode = async () => {

  }

  constructor() {
    super();
  }

  protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {

    Chart.register(...registerables);
    this.loadMode();
    this.renderChart();

  }
  
  override connectedCallback() {
    super.connectedCallback()
  }
  
  override render() {

    return html`
          
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <div class="SfChartBarC">
        <div part="chart-container">
          <canvas id="myChart"></canvas>
        </div>
      </div>

    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'sf-chart-bar': SfChartBar;
  }
}