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

@customElement('deap-mainselector')
export class DeapMainselector extends DeesElement {
  public static demo = () => html`<deap-mainselector></deap-mainselector>`;

  // INSTANCE
  @property()
  public selectionOptions: {key: string; action: () => void}[] = [
    {key: 'option 1', action: () => {alert('hello')}},
    {key: 'option 2', action: () => {}},
    {key: 'option 3', action: () => {}},
    {key: 'option 4', action: () => {}}
  ];

  public render (): TemplateResult {
    return html`
      <style>
        :host {
          color: #fff;
          position: relative;
          display: block;
          width: 100%;
          max-width: 300px;
          height: 100%;
          background: #3c3c3c;
        }
        .maincontainer {
          position: absolute;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;
        }

        .topbar {
          position: absolute;
          height: 80px;
          width: 100%;
          
          background: #333333;
        }

        .topbar .heading {
          padding-left: 20px;
          line-height: 80px;
          font-family: Roboto Mono;
          font-size: 16px;
        }

        .selectionOptions {
          position: absolute;
          top: 80px;
          left: 0px;
          width: 100%;
          font-family: Roboto Mono;
          font-size: 16px;
        }

        .selectionOptions .selectionOption {
          margin-left: 20px;
          margin-right: 20px;
          padding-top: 10px;
          padding-bottom: 10px;
          border-top: 1px solid #707070;
          cursor: pointer;
        }

        .selectionOptions .selectionOption:first-child {
          margin-top: 20px;
        }

        .selectionOptions .selectionOption:last-child {
          margin-bottom: 20px;
          border-bottom: 1px solid #707070;
        }
      </style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Properties</div>
        </div>
        <div class="selectionOptions">
          ${this.selectionOptions.map(selectionOptionArg => {
            return html`
              <div class="selectionOption" @click="${() => {selectionOptionArg.action()}}">
                ${selectionOptionArg.key}
              </div>
            `;
          })}
        </div>
      </div>
    `;
  }
}