import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';

@customElement('wcc-sidebar')
export class WccSidebar extends LitElement {
  @property({type: Array})
  public websites: string[] = [];

  @property()
  public pages: { [key: string]: TemplateResult } = {};

  @property()
  public elements: { [key: string]: LitElement } = {};

  @property({ attribute: false })
  public selectedItem: LitElement | TemplateResult;

  public render(): TemplateResult {
    return html`
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
      <style>
        :host {
          display: block;
          border-right: 1px solid #999;
          font-family: 'Roboto', sans-serif;
          box-sizing: border-box;
          position: absolute;
          left: 0px;
          width: 200px;
          top: 0px;
          bottom: 0px;
          overflow-y: scroll;
          overflow-x: hidden;
          background: #222;
          color: #fff;
          padding: 5px;
        }

        .heading {
          font-size: 24px;
          text-align: center;
          margin: 20px 5px 5px 5px;
        }
        .subheading {
          text-align: center;
        }
        .selectOption {
          position: relative;
          line-height: 24px;
          padding: 5px;
          transition: all 0.2s;
          display: grid;
          grid-template-columns: 28px auto;
        }
        .selectOption:hover {
          cursor: pointer;
          padding: 5px;
          color: #333;
          background: #fff;
        }

        .selectOption.selected {
          background: #455A64;;
        }

        .selectOption.selected:hover {
          cursor: pointer;
          color: #ffffff;
          background: #455A64;
        }

        .selectOption .material-icons {
          color: #666;
          display: block;
          transition: all 0.2s;
        }

        .selectOption.selected .material-icons {
          color: #000;
        }

        .selectOption .text {
          display: block;
          word-wrap: break-word;
          word-break: break-all;
          max-width: 100%;
        }

        
      </style>
      <div class="heading">
        lele-catalog
      </div>
      <div class="subheading">
        Lossless GmbH
      </div>
      <div class="menu">
        <h3>Live Websites</h3>
        ${this.websites.map(website => {
          return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
        })}
        <h3>Pages</h3>
        ${(() => {
          const pages = Object.keys(this.pages);
          return pages.map(pageName => {
            const item = this.pages[pageName];
            return html`
              <div
                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
                @click=${() => {
                  this.selectItem(item);
                }}
              >
                <i class="material-icons">insert_drive_file</i>
                <div class="text">${pageName}</div>
              </div>
            `;
          });
        })()}
        <h3>Elements</h3>
        ${(() => {
          const elements = Object.keys(this.elements);
          return elements.map(elementName => {
            const item = this.elements[elementName];
            return html`
              <div
                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
                @click=${() => {
                  this.selectItem(item);
                }}
              >
                <i class="material-icons">featured_video</i>
                <div class="text">${elementName}</div>
              </div>
            `;
          });
        })()}
      </menu>
    `;
  }

  public selectItem(item: TemplateResult | LitElement) {
    console.log('selected item');
    this.selectedItem = item;
    this.dispatchEvent(
      new CustomEvent('selectedItem', {
        detail: item
      })
    );
  }
}