import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';

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

@customElement('sio-subwidget-onboardme')
export class SioSubwidgetOnboardme extends DeesElement {
  @property()
  public showCombox = false;

  public static demo = () => html`
    <sio-subwidget-onboardme></sio-subwidget-onboardme>
  `;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        
        :host {
          display: block;
          position: relative;
          transition: all 0.1s;
          min-height: 200px;
          margin: 20px 20px 40px 20px;
          background: ${this.goBright ? '#fafafa' : '#111111'};
          border-radius: 16px;
          border-top: 1px solid rgba(250,250,250,0.1);
          box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
          padding: 24px 24px 32px 24px;
          color: #CCC;
          overflow: hidden;
        }

        :host(:hover) {
        }

        .brandingbox {
          text-align: center;
          position: absolute;
          width: 100%;
          bottom: 0px;
          left: 0px;
          font-size: 10px;
          padding: 3px;
          border-top: 1px solid rgba(250,250,250, 0.1);
          font-family: 'Dees Code';
          background: ${this.goBright ? '#eee' : '#111111'};
          color: #666;
        }
      </style>
      Or search through our documentation
      <dees-input-text key="searchTerm" label="Search Term:"></dees-input-text>
      <dees-button>Search</dees-button>
      <div class="brandingbox">last updated: ${new Date().toISOString()}</div>
    `;
  }
}