import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

@customElement('test-demoelement')
export class TestDemoelement extends DeesElement {
  public static demo = () => html`<test-demoelement></test-demoelement>`;

  public render() {
    return html`
      <style>
        .maincontainer, .themeindicator {
          display: block;
          padding: 10px;
          border-radius: 10px;
          margin-bottom: 20px;
        }
        .maincontainer {
            color: #fff;
            background: #000;
        }
        .themeindicator {
          color: ${this.goBright ? '#000' : '#fff'};
          background: ${this.goBright ? '#fff' : '#000'};
        }
        ${domtools.breakpoints.cssForPhablet(`
          .maincontainer, .themeindicator {
            border-radius: 50px;
          }
        `)}
      </style>
      <div class="maincontainer"><slot>This is a demo element</slot></div>
      <div class="themeindicator">
        You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
      </div>
    `;
  }
}