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

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

import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
  faFacebook,
  faGoogle,
  faLinkedin,
  faMedium,
  faSlackHash,
  faTwitter,
  faInstagram,
  faTiktok,
} from '@fortawesome/free-brands-svg-icons';

import {
  faMessage as faMessageRegular,
  faSun as faSunRegular,
} from '@fortawesome/free-regular-svg-icons';
import {
  faBell as faBellSolid,
  faBug as faBugSolid,
  faCaretLeft as faCaretLeftSolid,
  faCircleInfo as faCircleInfoSolid,
  faDesktop as faDesktopSolid,
  faGrip as faGripSolid,
  faMessage as faMessageSolid,
  faRss as faRssSolid,
  faUsers as faUsersSolid,
  faShare as faShareSolid,
  faSun as faSunSolid,
} from '@fortawesome/free-solid-svg-icons';

export const faIcons = {
  // normal
  bell: faBellSolid,
  bellSolid: faBellSolid,
  bug: faBugSolid,
  bugSolid: faBugSolid,
  caretLeft: faCaretLeftSolid,
  caretLeftSolid: faCaretLeftSolid,
  circleinfo: faCircleInfoSolid,
  circleinfoSolid: faCircleInfoSolid,
  desktop: faDesktopSolid,
  desktopSolid: faDesktopSolid,
  grip: faGripSolid,
  gripSolid: faGripSolid,
  message: faMessageRegular,
  messageSolid: faMessageSolid,
  rss: faRssSolid,
  rssSolid: faRssSolid,
  share: faShareSolid,
  shareSolid: faShareSolid,
  sun: faSunRegular,
  sunSolid: faSunSolid,
  // brands
  facebook: faFacebook,
  google: faGoogle,
  instagram: faInstagram,
  linkedin: faLinkedin,
  medium: faMedium,
  slack: faSlackHash,
  tiktok: faTiktok,
  twitter: faTwitter,
  users: faUsersSolid,
};

declare global {
  interface HTMLElementTagNameMap {
    'dees-icon': DeesIcon;
  }
}

@customElement('dees-icon')
export class DeesIcon extends DeesElement {
  public static demo = () => html`
    <dees-icon iconName="visibility"></dees-icon>
    <div style="background: #fff; padding: 10px; font-size: 24px">
      <dees-icon iconFA="messageSolid"></dees-icon>
      <dees-icon iconFA="sun"></dees-icon>
      <dees-icon iconFA="sunSolid"></dees-icon>
      <dees-icon iconFA="facebook"></dees-icon>
    </div>
  `;

  @property()
  public iconFA: keyof typeof faIcons;

  @property()
  public iconSize: number = 20;

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

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        white-space: nowrap;
      }
    `,
  ];

  public render() {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        #iconContainer svg {
          height: ${this.iconSize}px;
        }
      </style>
      <div id="iconContainer"></div>
    `;
  }

  public async firstUpdated() {
    if (this.iconFA) {
      this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
        ? icon(faIcons[this.iconFA]).html[0]
        : 'icon not found';
    }
  }
}