import * as plugins from './00plugins.js';
import * as colors from './00colors.js';

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

import { demoFunc } from './dees-label.demo.js';

@customElement('dees-label')
export class DeesLabel extends DeesElement {
  public static demo = demoFunc;

  // INSTANCE

  @property({
    type: String,
    reflect: true,
  })
  public label = '';

  @property({
    type: String,
    reflect: true,
  })
  public description: string;

  public static styles = [
    cssManager.defaultStyles,
    css`
      .label {
        color: ${cssManager.bdTheme('#333', '#ccc')};
        font-size: 14px;
        margin-bottom: 8px;
        cursor: default;
        user-select: none;
      }
      dees-icon {
        display: inline-block;
        font-size: 14px;
        transform: translateY(1.5px);
      }
    `,
  ];

  public render() {
    return html`
      ${this.label
        ? html`
            <div class="label">
              ${this.label}
              ${this.description
                ? html`
                    <dees-icon .iconFA=${'circleInfo'}></dees-icon>
                    <dees-speechbubble .text=${this.description}></dees-speechbubble>
                  `
                : html``}
            </div>
          `
        : html``}
    `;
  }
}