import * as React from 'react'
import iconActionsData from './icon-actions.data'
import iconSocData from './icon-soc.data'
import iconUxData from './icon-ux.data'

const data: {
  [index: string]: IIconType
} = {
  ...iconSocData as {[index: string]: IIconType},
  ...iconUxData as {[index: string]: IIconType},
  ...iconActionsData as {[index: string]: IIconType}
}

export interface IIconType {
  viewBox?: string,
  width: string,
  height: string,
  paths: string[],
  style?: { [index: string]: string },
  strokeOpacity?: string,
  strokeLinecap?: React.SVGProps<SVGPathElement>['strokeLinecap'],
  strokeLinejoin?: React.SVGProps<SVGPathElement>['strokeLinejoin']
}

export interface IIcon {
  icon: keyof typeof data | IconList
  width?: string
  height?: string
  stroke?: string
  fill?: string
  style?: object
  hover?: boolean
  className?: string
  onClick?: () => void,
  tooltip?: string,
  strokeWidth?: string
}

class IconComponent extends React.Component<IIcon> {

  public getFill(item, i): string {
    const { fill } = this.props
    if (fill) {
      return fill
    } else if (item.fills) {
      return item.fills[i]
    }
    return 'none'
  }

  public render() {
    const { icon, stroke, width, height, hover, className, onClick, strokeWidth } = this.props
    let { style } = this.props
    const item = data[icon]

    if (!item) {
      console.warn(`Icon "${icon}" doesn't exist!`)
      return null
    }

    if (!style && item.style) {
      style = item.style
    }

    const tooltip = {}

    if (this.props.tooltip) {
      tooltip['data-tip'] = this.props.tooltip
      tooltip['data-place'] = 'left'
      tooltip['data-for'] = 'global-tooltip'
    }

    return (
      <div
        className={className}
        onClick={() => onClick && onClick()}
        {...tooltip}
      >
        <svg
          width={width || item.width}
          height={height || item.height}
          viewBox={item.viewBox}
        >
          {hover ?
            <defs>
              <filter id='svgHover' x='0' y='0' width='200%' height='200%'>
                <feGaussianBlur result='blurOut' in='offOut' stdDeviation='1' />
                <feOffset result='offOut' in='SourceGraphic' dx='0' dy='0' />
                <feBlend in='SourceGraphic' in2='blurOut' mode='normal' />
              </filter>
            </defs>
            : ''}
          {item.paths ?
            item.paths.map((el, i) => {
              return (
                <path
                  key={i}
                  style={{ transition: '0.3s', ...style }}
                  fill={this.getFill(item, i)}
                  stroke={stroke || 'none'}
                  strokeWidth={strokeWidth || 'none'}
                  strokeOpacity={stroke && item.strokeOpacity ? item.strokeOpacity : 'none'}
                  strokeLinecap={stroke && item.strokeLinecap ? item.strokeLinecap : undefined}
                  strokeLinejoin={stroke && item.strokeLinejoin ? item.strokeLinejoin : undefined}
                  d={el}
                />
              )
            })
            : ''}
        </svg>
      </div>
    )
  }
}

enum IconList {
  // actions
  search = 'search',
  plus = 'plus',
  send = 'send',
  group = 'group',
  check = 'check',

  // soc
  vkontakte = 'vkontakte',
  facebook = 'facebook',
  sqFacebook = 'sqFacebook',
  sqOdnoklassniki = 'sqOdnoklassniki',
  sqMailru = 'sqMailru',
  sqVkontakte = 'sqVkontakte',

  // ux
  edit = 'edit',
  smallArrow = 'smallArrow',
  outlineStar = 'outlineStar',
  shareAlt = 'shareAlt',
  cross = 'cross',
  comment = 'comment',
  shared = 'shared',
  calendar = 'calendar',
  time = 'time',
  star = 'star',
  list = 'list',
  setting = 'setting',
  filter = 'filter',
  chat = 'chat',
  eye = 'eye',
  upload = 'upload',
  placemark = 'placemark',
  rouble = 'rouble',
  description = 'description',
  img = 'img',
  userPlus = 'userPlus',
  refresh = 'refresh',
  largeBackArrow = 'largeBackArrow',
  smallBackArrow = 'smallBackArrow',
  settings2 = 'settings2',
  addFriend = 'addFriend',
  removeFriend = 'removeFriend',
  notification = 'notification',
  photos = 'photos',
  addPhoto = 'addPhoto',
  angleDown = 'angleDown',
  people = 'people',
  deleteItem = 'deleteItem',
  editPlayer = 'editPlayer',
  ok = 'ok'
}

export { IconList }
export default IconComponent