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

export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';

let environment: TEnvironment = 'native';

export const setEnvironment = envArg => {
  environment = envArg;
};

@customElement('wcc-properties')
export class WccProperties extends LitElement {
  @property()
  public selectedItem: TemplateResult | LitElement;

  @property()
  public selectedInstance;

  @property()
  public selectedViewport = 'native';

  @property()
  public warning: string = null;

  public render(): TemplateResult {
    return html`
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
      <style>
        :host {
          font-family: 'Roboto', sans-serif;
          box-sizing: border-box;
          position: absolute;
          left: 200px;
          height: 100px;
          bottom: 0px;
          right: 0px;
          overflow: hidden;
          background: #111;
          color: #fff;
        }
        .grid {
          display: grid;
          grid-template-columns: auto 300px 70px;
        }
        .properties {
          border-right: 1px solid #999;
          height: 100px;
          overflow-y: auto;
          display: grid;
          grid-template-columns: 33% 33% 33%;
        }

        .properties .property {
          padding: 5px;
          background: #444;
          border: 1px solid #000;
        }
        .viewports {
          border-right: 1px solid #999;
        }
        .viewport-selectors {
          display: grid;
          grid-template-columns: 25% 25% 25% 25%;
        }
        .viewport {
          padding: 10px;
          text-align: center;
          border: 1px solid #000;
          transition: all 0.2s;
        }
        .viewport:hover {
          cursor: pointer;
          color: #333;
          background: #fff;
        }

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

        .viewport.selected:hover {
          cursor: pointer;
          color: #ffffff;
          background: #455a64;
        }

        .panelheading {
          padding: 5px;
          font-weight: bold;
          background: #444;
          border: 1px solid #000;
        }
        .docs {
          text-align: center;
          line-height: 100px;
          text-transform: uppercase;
        }

        .docs:hover {
          cursor: pointer;
          color: #333;
          background: #fff;
        }

        .warning {
          position: absolute;
          background: #800000;
          top: 0px;
          bottom: 0px;
          left: 0px;
          right: 0px;
          text-align: center;
          padding: 20px;
          font-size: 25px;
        }
      </style>
      <div class="grid">
        <div class="properties">
          <div class="panelheading">Properties</div>
          ${(() => {
            if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
              const anonItem: any = this.selectedItem;
              const classProperties: Map<string, any> = anonItem._classProperties;
              const returnArray: TemplateResult[] = [];
              for (const key of classProperties.keys()) {
                returnArray.push(
                  html`
                    <div class="property">
                      ${key} / ${classProperties.get(key).type.name} /
                      <pre>
${(() => {
                          const result = this.selectedInstance
                            ? JSON.stringify(this.selectedInstance[key], null, 2)
                            : null;
                          return result;
                        })()}</pre
                      >
                    </div>
                  `
                );
              }
              return returnArray;
            }
          })()}
        </div>
        <div class="viewports">
          <div class="panelheading">Viewports</div>
          <div class="viewport-selectors">
            <div
              class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('phone');
              }}
            >
              Phone<br /><i class="material-icons">smartphone</i>
            </div>
            <div
              class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('phablet');
              }}
            >
              Phablet<br /><i class="material-icons">smartphone</i>
            </div>
            <div
              class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('tablet');
              }}
            >
              Tablet<br /><i class="material-icons">tablet</i>
            </div>
            <div
              class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('native');
              }}
            >
              Desktop<br /><i class="material-icons">desktop_windows</i>
            </div>
          </div>
        </div>
        <div class="docs">Docs</div>
      </div>
      ${this.warning ? html`<div class="warning">
        ${this.warning}
      </div>` : null}
    `;
  }

  public selectViewport(viewport: TEnvironment) {
    this.selectedViewport = viewport;
    setEnvironment(viewport);
    this.dispatchEvent(
      new CustomEvent('selectedViewport', {
        detail: viewport
      })
    );
  }
}