import { FunctionalComponent } from 'preact';
import { IconType } from '@standardnotes/snjs';

import {
  AccessibilityIcon,
  AccountCircleIcon,
  AddIcon,
  ArchiveIcon,
  ArrowLeftIcon,
  ArrowsSortDownIcon,
  ArrowsSortUpIcon,
  AuthenticatorIcon,
  CheckBoldIcon,
  CheckCircleIcon,
  CheckIcon,
  ChevronDownIcon,
  ChevronRightIcon,
  CloseIcon,
  CloudOffIcon,
  CodeIcon,
  CopyIcon,
  DashboardIcon,
  DownloadIcon,
  EditorIcon,
  EmailIcon,
  EyeIcon,
  EyeOffIcon,
  HashtagIcon,
  HashtagOffIcon,
  HelpIcon,
  HistoryIcon,
  InfoIcon,
  KeyboardIcon,
  LinkOffIcon,
  ListBulleted,
  ListedIcon,
  LockFilledIcon,
  LockIcon,
  MarkdownIcon,
  MenuArrowDownAlt,
  MenuArrowDownIcon,
  MenuArrowRight,
  MenuCloseIcon,
  MoreIcon,
  NotesIcon,
  PasswordIcon,
  PencilOffIcon,
  PencilFilledIcon,
  PencilIcon,
  PinFilledIcon,
  PinIcon,
  PlainTextIcon,
  PremiumFeatureIcon,
  RestoreIcon,
  RichTextIcon,
  SecurityIcon,
  ServerIcon,
  SettingsIcon,
  SignInIcon,
  SignOutIcon,
  SpreadsheetsIcon,
  StarIcon,
  SyncIcon,
  TasksIcon,
  ThemesIcon,
  TrashFilledIcon,
  TrashIcon,
  TrashSweepIcon,
  TuneIcon,
  UnarchiveIcon,
  UnpinIcon,
  UserIcon,
  UserSwitch,
  WarningIcon,
  WindowIcon,
} from '@standardnotes/stylekit';

const ICONS = {
  'account-circle': AccountCircleIcon,
  'arrow-left': ArrowLeftIcon,
  'arrows-sort-down': ArrowsSortDownIcon,
  'arrows-sort-up': ArrowsSortUpIcon,
  'check-bold': CheckBoldIcon,
  'check-circle': CheckCircleIcon,
  'chevron-down': ChevronDownIcon,
  'chevron-right': ChevronRightIcon,
  'cloud-off': CloudOffIcon,
  'eye-off': EyeOffIcon,
  'hashtag-off': HashtagOffIcon,
  'link-off': LinkOffIcon,
  'list-bulleted': ListBulleted,
  'lock-filled': LockFilledIcon,
  'menu-arrow-down-alt': MenuArrowDownAlt,
  'menu-arrow-down': MenuArrowDownIcon,
  'menu-arrow-right': MenuArrowRight,
  'menu-close': MenuCloseIcon,
  'pencil-filled': PencilFilledIcon,
  'pencil-off': PencilOffIcon,
  'pin-filled': PinFilledIcon,
  'plain-text': PlainTextIcon,
  'premium-feature': PremiumFeatureIcon,
  'rich-text': RichTextIcon,
  'trash-filled': TrashFilledIcon,
  'trash-sweep': TrashSweepIcon,
  'user-switch': UserSwitch,
  accessibility: AccessibilityIcon,
  add: AddIcon,
  archive: ArchiveIcon,
  authenticator: AuthenticatorIcon,
  check: CheckIcon,
  close: CloseIcon,
  code: CodeIcon,
  copy: CopyIcon,
  dashboard: DashboardIcon,
  download: DownloadIcon,
  editor: EditorIcon,
  email: EmailIcon,
  eye: EyeIcon,
  hashtag: HashtagIcon,
  help: HelpIcon,
  history: HistoryIcon,
  info: InfoIcon,
  keyboard: KeyboardIcon,
  listed: ListedIcon,
  lock: LockIcon,
  markdown: MarkdownIcon,
  more: MoreIcon,
  notes: NotesIcon,
  password: PasswordIcon,
  pencil: PencilIcon,
  pin: PinIcon,
  restore: RestoreIcon,
  security: SecurityIcon,
  server: ServerIcon,
  settings: SettingsIcon,
  signIn: SignInIcon,
  signOut: SignOutIcon,
  spellcheck: NotesIcon,
  spreadsheets: SpreadsheetsIcon,
  star: StarIcon,
  sync: SyncIcon,
  tasks: TasksIcon,
  themes: ThemesIcon,
  trash: TrashIcon,
  tune: TuneIcon,
  unarchive: UnarchiveIcon,
  unpin: UnpinIcon,
  user: UserIcon,
  warning: WarningIcon,
  window: WindowIcon,
};

type Props = {
  type: IconType;
  className?: string;
  ariaLabel?: string;
};

export const Icon: FunctionalComponent<Props> = ({
  type,
  className = '',
  ariaLabel,
}) => {
  const IconComponent = ICONS[type as keyof typeof ICONS];
  if (!IconComponent) {
    return null;
  }
  return (
    <IconComponent
      className={`sn-icon ${className}`}
      role="img"
      {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
    />
  );
};