import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  property,
  type CSSResult,
  type TemplateResult,
} from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-chart-area.demo.js';

import ApexCharts from 'apexcharts';

declare global {
  interface HTMLElementTagNameMap {
    'dees-chart-area': DeesChartArea;
  }
}

@customElement('dees-chart-area')
export class DeesChartArea extends DeesElement {
  public static demo = demoFunc;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public static styles = [cssManager.defaultStyles, css`
    .mainbox {
      width: 600px;
      height: 600px;
      background: #222;
      border-radius: 3px;
      padding: 16px;
      padding-top: 32px;
    }
  `];

  public render(): TemplateResult {
    return html` <div class="mainbox"></div> `;
  }

  public async firstUpdated() {
    var options = {
      series: [
        {
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100],
        },
        {
          name: 'series2',
          data: [11, 32, 45, 32, 34, 52, 41],
        },
      ],
      chart: {
        width: 560,
        height: 540,
        type: 'area',
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
      },
      xaxis: {
        type: 'datetime',
        categories: [
          '2018-09-19T00:00:00.000Z',
          '2018-09-19T01:30:00.000Z',
          '2018-09-19T02:30:00.000Z',
          '2018-09-19T03:30:00.000Z',
          '2018-09-19T04:30:00.000Z',
          '2018-09-19T05:30:00.000Z',
          '2018-09-19T06:30:00.000Z',
        ],
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy HH:mm',
        },
      },
    };

    var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options);
    chart.render();
  }
}