import React, { ComponentType } from 'react';
import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';

import { SvgXml } from 'react-native-svg';

import { useTheme } from './ThemeContext';

import Add from '../icons/add';
import Eye from '../icons/eye';
import Lock from '../icons/lock';
import User from '../icons/user';
import Email from '../icons/email';
import Globe from '../icons/globe';
import Level from '../icons/level';
import Folder from '../icons/folder';
import Number from '../icons/number';
import Remove from '../icons/remove';
import Unlock from '../icons/unlock';
import FaceId from '../icons/face-id';
import Speaker from '../icons/speaker';
import ArrowUp from '../icons/arrow-up';
import Calendar from '../icons/calendar';
import Suitcase from '../icons/suitcase';
import Checkmark from '../icons/checkmark';
import LooksOne from '../icons/looks_one';
import LooksTwo from '../icons/looks_two';
import OkCircle from '../icons/ok-circle';
import Paperclip from '../icons/paperclip';
import Stopwatch from '../icons/stopwatch';
import ArrowDown from '../icons/arrow-down';
import Percentage from '../icons/percentage';
import Certificate from '../icons/certificate';
import CogOutline from '../icons/cog-outline';
import DollarSign from '../icons/dollar-sign';
import EyeOutline from '../icons/eye-outline';
import FormatBold from '../icons/format_bold';
import PlusCircle from '../icons/plus-circle';
import BellOutline from '../icons/bell-outline';
import FileOutline from '../icons/file-outline';
import HomeOutline from '../icons/home-outline';
import PlusOutline from '../icons/plus-outline';
import RadioActive from '../icons/radio-active';
import SendOutline from '../icons/send-outline';
import TalkOutline from '../icons/talk-outline';
import UserOutline from '../icons/user-outline';
import BirthdayCake from '../icons/birthday-cake';
import CancelCircle from '../icons/cancel-circle';
import CoinsOutline from '../icons/coins-outline';
import EmailOutline from '../icons/email-outline';
import EyeInvisible from '../icons/eye-invisible';
import FormatItalic from '../icons/format_italic';
import GlobeOutline from '../icons/globe-outline';
import ImageOutline from '../icons/image-outline';
import LevelOutline from '../icons/level-outline';
import MoreVertical from '../icons/more-vertical';
import PhoneOutline from '../icons/phone-outline';
import PlaneOutline from '../icons/plane-outline';
import RaisingHands from '../icons/raising-hands';
import RemoveCircle from '../icons/remove-circle';
import CameraOutline from '../icons/camera-outline';
import CancelOutline from '../icons/cancel-outline';
import FolderOutline from '../icons/folder-outline';
import MultipleStars from '../icons/multiple-stars';
import MultipleUsers from '../icons/multiple-users';
import RadioInactive from '../icons/radio-inactive';
import SearchOutline from '../icons/search-outline';
import TargetOutline from '../icons/target-outline';
import WarningCircle from '../icons/warning-circle';
import CommentOutline from '../icons/comment-outline';
import ExpenseOutline from '../icons/expense-outline';
import MoreHorizontal from '../icons/more-horizontal';
import SpeakerOutline from '../icons/speaker-outline';
import CalendarOutline from '../icons/calendar-outline';
import SuitcaseOutline from '../icons/suitcase-outline';
import FormatUnderlined from '../icons/format_underlined';
import OkCircleOutline from '../icons/ok-circle-outline';
import RecognitionMedal from '../icons/recognition-medal';
import StopwatchOutline from '../icons/stopwatch-outline';
import HealthBagOutline from '../icons/health-bag-outline';
import PiggyBankOutline from '../icons/piggy-bank-outline';
import PlusCircleOutline from '../icons/plus-circle-outline';
import SingleLeftOutline from '../icons/single-left-outline';
import ClockCircleOutline from '../icons/clock-circle-outline';
import FormatListBulleted from '../icons/format_list_bulleted';
import FormatListNumbered from '../icons/format_list_numbered';
import SingleRightOutline from '../icons/single-right-outline';
import CancelCircleOutline from '../icons/cancel-circle-outline';
import EyeInvisibleOutline from '../icons/eye-invisible-outline';
import RemoveCircleOutline from '../icons/remove-circle-outline';
import WarningCircleOutline from '../icons/warning-circle-outline';
import RecognitionMedalOutline from '../icons/recognition-medal-outline';

const ICON_MAP = {
  add: Add,
  'arrow-down': ArrowDown,
  'arrow-up': ArrowUp,
  'bell-outline': BellOutline,
  'birthday-cake': BirthdayCake,
  calendar: Calendar,
  'calendar-outline': CalendarOutline,
  'camera-outline': CameraOutline,
  'cancel-circle': CancelCircle,
  'cancel-circle-outline': CancelCircleOutline,
  'cancel-outline': CancelOutline,
  certificate: Certificate,
  checkmark: Checkmark,
  'clock-circle-outline': ClockCircleOutline,
  'cog-outline': CogOutline,
  'coins-outline': CoinsOutline,
  'comment-outline': CommentOutline,
  'dollar-sign': DollarSign,
  email: Email,
  'email-outline': EmailOutline,
  'expense-outline': ExpenseOutline,
  eye: Eye,
  'eye-invisible': EyeInvisible,
  'eye-invisible-outline': EyeInvisibleOutline,
  'eye-outline': EyeOutline,
  'face-id': FaceId,
  'file-outline': FileOutline,
  folder: Folder,
  'folder-outline': FolderOutline,
  format_bold: FormatBold,
  format_italic: FormatItalic,
  format_list_bulleted: FormatListBulleted,
  format_list_numbered: FormatListNumbered,
  format_underlined: FormatUnderlined,
  globe: Globe,
  'globe-outline': GlobeOutline,
  'health-bag-outline': HealthBagOutline,
  'home-outline': HomeOutline,
  'image-outline': ImageOutline,
  level: Level,
  'level-outline': LevelOutline,
  lock: Lock,
  looks_one: LooksOne,
  looks_two: LooksTwo,
  'more-horizontal': MoreHorizontal,
  'more-vertical': MoreVertical,
  'multiple-stars': MultipleStars,
  'multiple-users': MultipleUsers,
  number: Number,
  'ok-circle': OkCircle,
  'ok-circle-outline': OkCircleOutline,
  paperclip: Paperclip,
  percentage: Percentage,
  'phone-outline': PhoneOutline,
  'piggy-bank-outline': PiggyBankOutline,
  'plane-outline': PlaneOutline,
  'plus-circle': PlusCircle,
  'plus-circle-outline': PlusCircleOutline,
  'plus-outline': PlusOutline,
  'radio-active': RadioActive,
  'radio-inactive': RadioInactive,
  'raising-hands': RaisingHands,
  'recognition-medal': RecognitionMedal,
  'recognition-medal-outline': RecognitionMedalOutline,
  remove: Remove,
  'remove-circle': RemoveCircle,
  'remove-circle-outline': RemoveCircleOutline,
  'search-outline': SearchOutline,
  'send-outline': SendOutline,
  'single-left-outline': SingleLeftOutline,
  'single-right-outline': SingleRightOutline,
  speaker: Speaker,
  'speaker-outline': SpeakerOutline,
  stopwatch: Stopwatch,
  'stopwatch-outline': StopwatchOutline,
  suitcase: Suitcase,
  'suitcase-outline': SuitcaseOutline,
  'talk-outline': TalkOutline,
  'target-outline': TargetOutline,
  unlock: Unlock,
  user: User,
  'user-outline': UserOutline,
  'warning-circle': WarningCircle,
  'warning-circle-outline': WarningCircleOutline,
};

export type Props = {
  readonly color?: string;
  readonly icon: string;
  readonly size?: number;
  readonly testID?: string;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
};

const Icon: ComponentType<Props> = ({ icon, size = 24, color, wrapperStyle = {}, testID }) => {
  const theme = useTheme();

  const iconColor = color !== undefined ? color : theme.icon.icon.color;

  const xml = ICON_MAP[icon];
  if (xml === undefined) {
    return null;
  }

  return (
    <View
      testID={testID}
      style={StyleSheet.flatten([
        {
          alignItems: 'center',
          display: 'flex',
          height: size,
          justifyContent: 'center',
          width: size,
        },
        wrapperStyle,
      ])}
    >
      <SvgXml
        xml={xml}
        override={{
          width: size,
          height: size,
          stroke: iconColor,
          fill: iconColor,
        }}
      />
    </View>
  );
};

export default Icon;