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-left': (p) => <icons.IconArrowLeft {...p} />,
  'hy-icon-arrow-right': (p) => <icons.IconArrowRight {...p} />,
  'hy-icon-arrow-down': (p) => <icons.ArrowDown {...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-euro': (p) => <icons.Euro {...p} />,
  'hy-icon-globe': (p) => <icons.Globe {...p} />,
  'hy-icon-hamburger': (p) => <icons.Hamburger {...p} />,
  'hy-icon-home': (p) => <icons.Home {...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-remove': (p) => <icons.Remove {...p} />,
  'hy-icon-search': (p) => <icons.Search {...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>
    );
  }
}