import {
  Component,
  HostBinding,
  Input,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { Required } from '../../decorators/required.decorator';

import { AddFriendIcon } from './icons/add-friend/add-friend.icon';
import { BenchPressIcon } from './icons/bench-press/bench-press.icon';
import { BreakfastIcon } from './icons/breakfast/breakfast.icon';
import { CheckMarkIcon } from './icons/check-mark/check-mark.icon';
import { ChevronDownIcon } from './icons/chevron-down/chevron-down.icon';
import { ChevronLeftIcon } from './icons/chevron-left/chevron-left.icon';
import { ChevronUpIcon } from './icons/chevron-up/chevron-up.icon';
import { ClockIcon } from './icons/clock/clock.icon';
import { CloseIcon } from './icons/close/close.icon';
import { ContinueIcon } from './icons/continue/continue.icon';
import { CutleryIcon } from './icons/cutlery/cutlery.icon';
import { DinnerIcon } from './icons/dinner/dinner.icon';
import { DocumentIcon } from './icons/document/document.icon';
import { DumbbellIcon } from './icons/dumbbell/dumbbell.icon';
import { EmailIcon } from './icons/email/email.icon';
import { ExerciseIcon } from './icons/exercise/exercise.icon';
import { FilterIcon } from './icons/filter/filter.icon';
import { FoodIcon } from './icons/food/food.icon';
import { GoogleIcon } from './icons/google/google.icon';
import { GymIcon } from './icons/gym/gym.icon';
import { HeartFilledIcon } from './icons/heart-filled/heart-filled.icon';
import { HeartOutlineIcon } from './icons/heart-outline/heart-outline.icon';
import { HelpIcon } from './icons/help/help.icon';
import { HomeIcon } from './icons/home/home.icon';
import { InformationIcon } from './icons/information/information.icon';
import { KettlebellIcon } from './icons/kettlebell/kettlebell.icon';
import { LoginIcon } from './icons/login/login.icon';
import { LogoutIcon } from './icons/logout/logout.icon';
import { LunchIcon } from './icons/lunch/lunch.icon';
import { MenuIcon } from './icons/menu/menu.icon';
import { MuscleIcon } from './icons/muscle/muscle.icon';
import { NutrientsIcon } from './icons/nutrients/nutrients.icon';
import { PauseIcon } from './icons/pause/pause.icon';
import { PencilIcon } from './icons/pencil/pencil.icon';
import { PeopleIcon } from './icons/people/people.icon';
import { PersonIcon } from './icons/person/person.icon';
import { PhoneIcon } from './icons/phone/phone.icon';
import { PilatesIcon } from './icons/pilates/pilates.icon';
import { PlusIcon } from './icons/plus/plus.icon';
import { PunchingBagIcon } from './icons/punching-bag/punching-bag.icon';
import { QuestionIcon } from './icons/question/question.icon';
import { SearchIcon } from './icons/search/search.icon';
import { ServingIcon } from './icons/serving/serving.icon';
import { SettingsIcon } from './icons/settings/settings.icon';
import { ShareIcon } from './icons/share/share.icon';
import { SnacksIcon } from './icons/snacks/snacks.icon';
import { StarFilledIcon } from './icons/star-filled/star-filled.icon';
import { StarOutlineIcon } from './icons/star-outline/star-outline.icon';
import { SuccessIcon } from './icons/success/success.icon';
import { TrashCanIcon } from './icons/trash-can/trash-can.icon';
import { TreadmillIcon } from './icons/treadmill/treadmill.icon';
import { WarnIcon } from './icons/warn/warn.icon';

export type IconSize = 48 | 40 | 32 | 24 | 16 | 8;

interface Icons {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [name: string]: any;
}

const icons = {
  'add-friend': AddFriendIcon,
  'bench-press': BenchPressIcon,
  breakfast: BreakfastIcon,
  'check-mark': CheckMarkIcon,
  'chevron-down': ChevronDownIcon,
  'chevron-left': ChevronLeftIcon,
  'chevron-up': ChevronUpIcon,
  clock: ClockIcon,
  close: CloseIcon,
  continue: ContinueIcon,
  cutlery: CutleryIcon,
  dinner: DinnerIcon,
  document: DocumentIcon,
  dumbbell: DumbbellIcon,
  email: EmailIcon,
  exercise: ExerciseIcon,
  filter: FilterIcon,
  food: FoodIcon,
  google: GoogleIcon,
  gym: GymIcon,
  'heart-filled': HeartFilledIcon,
  'heart-outline': HeartOutlineIcon,
  help: HelpIcon,
  home: HomeIcon,
  information: InformationIcon,
  kettlebell: KettlebellIcon,
  login: LoginIcon,
  logout: LogoutIcon,
  lunch: LunchIcon,
  menu: MenuIcon,
  muscle: MuscleIcon,
  nutrients: NutrientsIcon,
  pause: PauseIcon,
  pencil: PencilIcon,
  people: PeopleIcon,
  person: PersonIcon,
  phone: PhoneIcon,
  pilates: PilatesIcon,
  plus: PlusIcon,
  'punching-bag': PunchingBagIcon,
  question: QuestionIcon,
  search: SearchIcon,
  serving: ServingIcon,
  settings: SettingsIcon,
  share: ShareIcon,
  snacks: SnacksIcon,
  'star-filled': StarFilledIcon,
  'star-outline': StarOutlineIcon,
  success: SuccessIcon,
  'trash-can': TrashCanIcon,
  treadmill: TreadmillIcon,
  warn: WarnIcon,
};

export type IconName = keyof typeof icons;

@Component({
  selector: 'app-icon[name]',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.scss'],
})
export class IconComponent {
  @ViewChild('iconHost', { read: ViewContainerRef })
  iconHost!: ViewContainerRef;

  @Input() @Required() name!: IconName;

  @HostBinding('style.--size') @Input() size: IconSize = 48;
  @HostBinding('style.--fill') @Input() fill?: string;
  @HostBinding('style.--stroke') @Input() stroke?: string;

  private icons: Icons = icons;

  ngAfterViewInit(): void {
    this.iconHost.clear();

    if (!this.icons[this.name]) {
      throw new Error(`Can't find '${this.name}' icon`);
    }

    this.iconHost.createComponent(this.icons[this.name]);
  }
}
