import {Component, h, Prop, Host} from '@stencil/core';
import * as icons from './icons';
import {IconName} from '../../utils/utils';

// TODO: add all icons
const iconNames: IconName = {
  'hy-icon-arrow-down': (p) => <icons.ArrowDown {...p} />,
  'hy-icon-arrow-left': (p) => <icons.IconArrowLeft {...p} />,
  'hy-icon-arrow-right': (p) => <icons.IconArrowRight {...p} />,
  'hy-icon-arrow-to-right': (p) => <icons.IconArrowToRight {...p} />,
  'hy-icon-alert': (p) => <icons.Alert {...p} />,
  'hy-icon-arrow-up': (p) => <icons.ArrowUp {...p} />,
  'hy-icon-camera': (p) => <icons.Camera {...p} />,
  'hy-icon-caret-down': (p) => <icons.CaretDown {...p} />,
  'hy-icon-caret-left': (p) => <icons.CaretLeft {...p} />,
  'hy-icon-caret-right': (p) => <icons.CaretRight {...p} />,
  'hy-icon-dot-arrow-right': (p) => <icons.DotArrowRight {...p} />,
  'hy-icon-done': (p) => <icons.Done {...p} />,
  'hy-icon-euro': (p) => <icons.Euro {...p} />,
  'hy-icon-heart': (p) => <icons.Heart {...p} />,
  'hy-icon-heart-support': (p) => <icons.HeartSupport {...p} />,
  'hy-icon-link': (p) => <icons.Url {...p} />,
  'hy-icon-globe': (p) => <icons.Globe {...p} />,
  'hy-icon-hamburger': (p) => <icons.Hamburger {...p} />,
  'hy-icon-home': (p) => <icons.Home {...p} />,
  'hy-icon-email': (p) => <icons.Mail {...p} />,
  'hy-icon-phone': (p) => <icons.Phone {...p} />,
  'hy-icon-hy-logo': (p) => <icons.HyLogo {...p} />,
  'hy-icon-image-gallery': (p) => <icons.ImageGallery {...p} />,
  'hy-icon-link-arrow-down': (p) => <icons.LinkArrowDown {...p} />,
  'hy-icon-minus': (p) => <icons.Minus {...p} />,
  'hy-icon-play': (p) => <icons.Play {...p} />,
  'hy-icon-plus': (p) => <icons.Plus {...p} />,
  'hy-icon-quote': (p) => <icons.IconQuote {...p} />,
  'hy-icon-remove': (p) => <icons.Remove {...p} />,
  'hy-icon-search': (p) => <icons.Search {...p} />,
  'hy-icon-some-facebook': (p) => <icons.SomeFacebook {...p} />,
  'hy-icon-some-instagram': (p) => <icons.SomeInstagram {...p} />,
  'hy-icon-some-linkedin': (p) => <icons.SomeLinkedin {...p} />,
  'hy-icon-some-twitter': (p) => <icons.SomeTwitter {...p} />,
  'hy-icon-some-youtube': (p) => <icons.SomeYoutube {...p} />,
  'hy-icon-video': (p) => <icons.Video {...p} />,
};

@Component({
  tag: 'hy-icon',
  styleUrl: 'icon.css',
  shadow: false,
})
export class Icon {
  @Prop() icon: string;
  @Prop() fill: string = 'black';
  @Prop() size: number = 20;

  render() {
    return (
      <Host aria-hidden="true" style={{display: 'flex'}}>
        {iconNames[this.icon]({
          height: this.size,
          width: this.size,
          fill: this.fill,
        })}
      </Host>
    );
  }
}