import { className as classNameFn } from 'lib/css'
import iconAvatar32 from '../../../../../icons/avatar_bot-32.svg'
import iconArrowLeft16 from '../../../../../icons/icon_arrow_left-16.svg'
import iconArrowRight16 from '../../../../../icons/icon_arrow_right-16.svg'
import iconBalloon32 from '../../../../../icons/icon_balloon-32.svg'
import iconCheck16 from '../../../../../icons/icon_check-16.svg'
import iconCheck32 from '../../../../../icons/icon_check-32.svg'
import iconChevronDown32 from '../../../../../icons/icon_chevron_down-32.svg'
import iconChevronDown8 from '../../../../../icons/icon_chevron_down-8.svg'
import iconChevronRight16 from '../../../../../icons/icon_chevron_right-16.svg'
import iconChevronRight8 from '../../../../../icons/icon_chevron_right-8.svg'
import iconClose16 from '../../../../../icons/icon_close-16.svg'
import iconClose8 from '../../../../../icons/icon_close-8.svg'
import iconDownload16 from '../../../../../icons/icon_download-16.svg'
import iconEnlarge32 from '../../../../../icons/icon_enlarge-32.svg'
import iconError16 from '../../../../../icons/icon_error-16.svg'
import iconFile32 from '../../../../../icons/icon_file-32.svg'
import iconNewTopic32 from '../../../../../icons/icon_newtopic-32.svg'
import iconNewTranslation16 from '../../../../../icons/icon_newtranslation-16.svg'
import iconNewTranslation32 from '../../../../../icons/icon_newtranslation-32.svg'
import iconOptions32 from '../../../../../icons/icon_options-32.svg'
import iconSend32 from '../../../../../icons/icon_send-32.svg'
import iconUpload32 from '../../../../../icons/icon_upload-32.svg'

export const ICONS = {
  send: {
    32: iconSend32,
  },
  balloon: {
    32: iconBalloon32,
  },
  newTopic: {
    32: iconNewTopic32,
  },
  newTranslation: {
    16: iconNewTranslation16,
    32: iconNewTranslation32,
  },
  avatar: {
    32: iconAvatar32,
  },
  chevronDown: {
    8: iconChevronDown8,
    32: iconChevronDown32,
  },
  chevronRight: {
    8: iconChevronRight8,
    16: iconChevronRight16,
  },
  close: {
    8: iconClose8,
    16: iconClose16,
  },
  enlarge: {
    32: iconEnlarge32,
  },
  options: {
    32: iconOptions32,
  },
  file: {
    32: iconFile32,
  },
  upload: {
    32: iconUpload32,
  },
  download: {
    16: iconDownload16,
  },
  error: {
    16: iconError16,
  },
  arrowLeft: {
    16: iconArrowLeft16,
  },
  arrowRight: {
    16: iconArrowRight16,
  },
  check: {
    16: iconCheck16,
    32: iconCheck32,
  },
} as const

export type IconProps = {
  name: keyof typeof ICONS | string
  size?: '8' | '16' | '32'
  className?: string
  alt: string
}

const Icon = ({ name, size = '32', className, alt }: IconProps) => (
  <>
    <div
      aria-hidden="true"
      className={className || classNameFn('icon')}
      dangerouslySetInnerHTML={{ __html: ICONS[name][size] }}
    />
    {alt && <span className={classNameFn('visually-hidden')}>{alt}</span>}
  </>
)

export default Icon