import React from 'react';
import type { SvgProps } from 'react-native-svg';
import { CameraFocused, CameraInactive } from './components/CameraComponent';
import { ChatFocused, ChatInactive } from './components/ChatComponent';
import { ChiperFocused, ChiperInactive } from './components/ChiperComponent';
import { HeadSetFocused, HeadSetInactive } from './components/HeadSetComponent';
import { HomeFocused, HomeInactive } from './components/HomeComponent';
import { MedalFocused, MedalInactive } from './components/MedalComponent';
import { MoneyFocused, MoneyInactive } from './components/MoneyComponent';
import { PromosFocused, PromoInactive } from './components/PromosComponent';
import { StarFocused, StarInactive } from './components/StarComponent';
import { TicketFocused, TicketInactive } from './components/TicketComponent';
import { TrophyFocused, TrophyInactive } from './components/TrophyComponent';
import { UserFocused, UserInactive } from './components/UserComponent';
import { Normalize } from '../../utils/normalize';

export const ICONS = {
  cameraFocused: CameraFocused,
  cameraInactive: CameraInactive,
  chatFocused: ChatFocused,
  chatInactive: ChatInactive,
  chiperFocused: ChiperFocused,
  chiperInactive: ChiperInactive,
  headSetFocused: HeadSetFocused,
  headSetInactive: HeadSetInactive,
  homeFocused: HomeFocused,
  homeInactive: HomeInactive,
  medalFocused: MedalFocused,
  medalInactive: MedalInactive,
  moneyFocused: MoneyFocused,
  moneyInactive: MoneyInactive,
  promosFocused: PromosFocused,
  promoInactive: PromoInactive,
  starFocused: StarFocused,
  starInactive: StarInactive,
  ticketFocused: TicketFocused,
  ticketInactive: TicketInactive,
  trophyFocused: TrophyFocused,
  trophyInactive: TrophyInactive,
  userFocused: UserFocused,
  userInactive: UserInactive,
};

export type IconName = keyof typeof ICONS;

export interface IconProps extends Omit<SvgProps, 'height' | 'width'> {
  name: IconName | undefined;
  size?: number;
}

/**
 * @name Name of icon to render
 * @width Icon width and height
 * @see https://zeroheight.com/502cb86ad/p/930bf3-icons/b/44ff47/t/45936e
 */
export const Icon = ({ name, size = Normalize(32), ...props }: IconProps) => {
  const IconImpl = name !== undefined ? ICONS[name] : null;

  return IconImpl ? <IconImpl width={size} height={size} {...props} /> : null;
};