import * as plugins from './00plugins.js';
import * as colors from './00colors.js';
import { demoFunc } from './dees-progressbar.demo.js';
import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
  type CSSResult,
  unsafeCSS,
  unsafeHTML,
  state,
} from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';

@customElement('dees-progressbar')
export class DeesProgressbar extends DeesElement {
  // STATIC
  public static demo = demoFunc;

  // INSTANCE
  @property({
    type: Number,
  })
  public percentage = 0;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
      }
      .progressBarContainer {
        padding: 8px;
        min-width: 200px;
      }

      .progressBar {
        background: ${cssManager.bdTheme('#eeeeeb', '#444')};
        height: 8px;
        width: 100%;
        border-radius: 4px;
        border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')};
      }

      .progressBarFill {
        background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)};
        height: 8px;
        margin-top: -0.5px;
        transition: 0.2s width;
        border-radius: 4px;
        width: 0px;
        border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')};
      }

      .progressText {
        padding: 8px;
        text-align: center;
      }
    `
  ];

  public render() {
    return html`
      <div class="progressBarContainer">
        <div class="progressBar">
          <div class="progressBarFill"></div>
          <div class="progressText">
            ${this.percentage}%
          <div>
        </div>
      </div>
    `
  }

  firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): void {
    super.firstUpdated(_changedProperties);
    this.updateComplete.then(() => {
      this.updatePercentage();
    });
  }

  public async updatePercentage() {
    const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
    progressBarFill.style.width = `${this.percentage}%`;
  }

  updated(){
    this.updatePercentage();
  }
}