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

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

import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faFacebook } from '@fortawesome/free-brands-svg-icons';

type TBrand = 'facebook' | 'twitter';
const brandIcons: {[key: string]: IconDefinition} = {
  facebook: faFacebook
};

@customElement('dees-icon')
export class DeesIcon extends LitElement {
  public static demo = () => html`
    <div style="background: #fff; padding: 10px;">
      <dees-icon iconName="visibility"></dees-icon>
      <dees-icon brandName="facebook"></dees-icon>
    </div>

    `;

  @property()
  public iconName: string;

  @property()
  public brandName: TBrand;

  @property()
  public svgSize: number = 20;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public render() {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          display: block;
          line-height: inherit;
          font-size: inherit;
        }
        #iconContainer svg {
          display: inline-block;
          height: ${this.svgSize}px;
        }
        .material-icons {
          font-family: 'Material Icons';
          font-weight: normal;
          font-style: normal;
          line-height: inherit;
          font-size: inherit;
          display: inline-block;
          line-height: inherit;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;

          /* Support for all WebKit browsers. */
          -webkit-font-smoothing: antialiased;
          /* Support for Safari and Chrome. */
          text-rendering: optimizeLegibility;

          /* Support for Firefox. */
          -moz-osx-font-smoothing: grayscale;

          /* Support for IE. */
          font-feature-settings: 'liga';
        }
      </style>
      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
    `;
  }

  firstUpdated() {
    if (this.brandName && !this.iconName) {
      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
    }
  }
}