import React, { useState } from 'react'
import { number, shape, string } from 'prop-types'
import { getFontSizeByElementSize, getSizeStyles } from '../../helpers'
import './CompanyIcon.less'

const propTypes = {
  style: shape({}),
  name: string,
  logo: string,
  size: number
}

const defaultProps = {
  style: {},
  name: '',
  logo: '',
  size: 40
}

const CompanyIcon = ({
  style, name, logo, size
}) => {
  const [imageError, setImageError] = useState(true)
  const initials = name[0]

  const onLoad = () => {
    setImageError(false)
  }

  const getCompanyIconStyle = () => ({
    ...style,
    ...getSizeStyles(size)
  })

  return (
    <span
      className={`Company-Icon ${imageError ? '--error' : ''}`}
      style={getCompanyIconStyle()}
      key={logo}
    >
      <span className="Company-Icon__initials" style={{ fontSize: getFontSizeByElementSize({ elementSize: size }) }}>
        {initials}
      </span>
      <img
        className="Company-Icon__image"
        src={logo}
        onLoad={onLoad}
        onError={() => setImageError(true)}
      />
    </span>
  )
}

CompanyIcon.propTypes = propTypes
CompanyIcon.defaultProps = defaultProps

export default CompanyIcon