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

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

import ApexCharts from 'apexcharts';

declare global {
  interface HTMLElementTagNameMap {
    'dees-chart-log': DeesChartLog;
  }
}

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

  // instance
  @state()
  public chart: ApexCharts;

  @property()
  public label: string = 'Untitled Chart';

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

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        font-family: 'Geist Sans', sans-serif;
        color: #ccc;
        font-weight: 600;
        font-size: 12px;
      }
      .mainbox {
        position: relative;
        width: 100%;
        height: 400px;
        background: #222;
        border-radius: 8px;
        padding: 32px 16px 16px 0px;
      }

      .chartTitle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        padding-top: 16px;
      }
      .chartContainer {
        position: relative;
        width: 100%;
        height: 100%;
      }
    `,
  ];

  public render(): TemplateResult {
    return html` <div class="mainbox">
      <div class="chartTitle">${this.label}</div>
      <div class="chartContainer"></div>
    </div> `;
  }

  public async firstUpdated() {
    const domtoolsInstance = await this.domtoolsPromise;
    
  }

  public async updateLog() {
    
  }
}