import {CSSProperties, FC} from "react";
import {Text} from "@tarojs/components";
import {ITouchEvent} from "@tarojs/components/types/common";
import './icon.scss'

export type IconName =
  | 'add'
  | 'add-circle'
  | 'subtract'
  | 'subtract-circle'
  | 'align-center'
  | 'align-left'
  | 'align-right'
  | 'arrow-down'
  | 'arrow-left'
  | 'arrow-right'
  | 'arrow-up'
  | 'bell'
  | 'blocked'
  | 'bookmark'
  | 'bullet-list'
  | 'calendar'
  | 'camera'
  | 'check-circle'
  | 'chevron-down'
  | 'chevron-left'
  | 'chevron-right'
  | 'chevron-up'
  | 'clock'
  | 'close-circle'
  | 'close'
  | 'credit-card'
  | 'download-cloud'
  | 'download'
  | 'edit'
  | 'equalizer'
  | 'external-link'
  | 'eye'
  | 'file-audio'
  | 'file-code'
  | 'file-generic'
  | 'file-jpg'
  | 'file-new'
  | 'file-png'
  | 'file-svg'
  | 'file-video'
  | 'filter'
  | 'folder'
  | 'font-color'
  | 'heart'
  | 'help'
  | 'home'
  | 'image'
  | 'iphone-x'
  | 'iphone'
  | 'lightning-bolt'
  | 'link'
  | 'list'
  | 'lock'
  | 'mail'
  | 'map-pin'
  | 'menu'
  | 'message'
  | 'money'
  | 'next'
  | 'numbered-list'
  | 'pause'
  | 'phone'
  | 'play'
  | 'playlist'
  | 'prev'
  | 'reload'
  | 'repeat-play'
  | 'search'
  | 'settings'
  | 'share-2'
  | 'share'
  | 'shopping-bag-2'
  | 'shopping-bag'
  | 'shopping-cart'
  | 'shuffle-play'
  | 'sketch'
  | 'sound'
  | 'star'
  | 'stop'
  | 'streaming'
  | 'tag'
  | 'tags'
  | 'text-italic'
  | 'text-strikethrough'
  | 'text-underline'
  | 'trash'
  | 'upload'
  | 'user'
  | 'video'
  | 'volume-minus'
  | 'volume-off'
  | 'volume-plus'
  | 'analytics'
  | 'star-2'
  | 'check'
  | 'heart-2'
  | 'loading'
  | 'loading-2'
  | 'loading-3'
  | 'alert-circle'

export const icons: IconName[] = [
  'add',
  'add-circle',
  'subtract',
  'subtract-circle',
  'align-center',
  'align-left',
  'align-right',
  'arrow-down',
  'arrow-left',
  'arrow-right',
  'arrow-up',
  'bell',
  'blocked',
  'bookmark',
  'bullet-list',
  'calendar',
  'camera',
  'check-circle',
  'chevron-down',
  'chevron-left',
  'chevron-right',
  'chevron-up',
  'clock',
  'close-circle',
  'close',
  'credit-card',
  'download-cloud',
  'download',
  'edit',
  'equalizer',
  'external-link',
  'eye',
  'file-audio',
  'file-code',
  'file-generic',
  'file-jpg',
  'file-new',
  'file-png',
  'file-svg',
  'file-video',
  'filter',
  'folder',
  'font-color',
  'heart',
  'help',
  'home',
  'image',
  'iphone-x',
  'iphone',
  'lightning-bolt',
  'link',
  'list',
  'lock',
  'mail',
  'map-pin',
  'menu',
  'message',
  'money',
  'next',
  'numbered-list',
  'pause',
  'phone',
  'play',
  'playlist',
  'prev',
  'reload',
  'repeat-play',
  'search',
  'settings',
  'share-2',
  'share',
  'shopping-bag-2',
  'shopping-bag',
  'shopping-cart',
  'shuffle-play',
  'sketch',
  'sound',
  'star',
  'stop',
  'streaming',
  'tag',
  'tags',
  'text-italic',
  'text-strikethrough',
  'text-underline',
  'trash',
  'upload',
  'user',
  'video',
  'volume-minus',
  'volume-off',
  'volume-plus',
  'analytics',
  'star-2',
  'check',
  'heart-2',
  'loading',
  'loading-2',
  'loading-3',
  'alert-circle',
];

export interface IconProps {
  name: IconName
  size?: string | number
  color?: string
  onClick?: (event: ITouchEvent) => void
}

const Icon: FC<IconProps> = (props) => {
  const size = typeof props.size === 'string' ? props.size : `${props.size ?? 16}px`
  const color = props.color ?? 'currentColor'
  const fontStyle: CSSProperties = {fontSize: size, color}

  return (
    <Text className={`icon icon-${props.name}`} style={fontStyle} onClick={props.onClick} />
  )
}

export default Icon
