import React, { useState, useMemo, useCallback } from 'react'
import PropTypes from 'prop-types'
import { Tooltip } from 'antd'
import { getFontSizeByElementSize, getSizeStyles } from '../../helpers'
import './Avatar.less'

const getAvatarOpacity = (opacity) => (100 - opacity) / 100

const getBorderStyles = (url, avatarSize, imageError) => {
  if (url && !imageError) return 'none'
  // border width is 4% of avatar width/height
  const borderWidth = Math.ceil(avatarSize * 0.04)

  return `${borderWidth}px solid #2C3336`
}

function Avatar({ url, style, name, opacity, userStatus, onClick, size, audioLevel }) {
  const [imageError, setImageError] = useState(false)
  const [loaded, setLoaded] = useState(false)

  const initials = name?.trim()[0]

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

  const avatarStyle = useMemo(
    () => ({
      ...style,
      ...getSizeStyles(size),
      opacity: getAvatarOpacity(opacity),
      border: getBorderStyles(url, size, imageError),
      // this is to fix a safari mobile bug with the audio levels
      // there are no audio levels on user status avatars so it's okay there
      // overflow: userStatus ? 'visible' : 'auto',
      overflow: userStatus ? 'visible' : 'auto',
    }),
    [style, size, opacity, userStatus, imageError, url]
  )

  const avatarStatusStyle = useMemo(
    () => ({
      // This is to set the status in the same position with and without a border
      bottom: imageError ? -2 - Math.ceil(size * 0.04) : -2,
    }),
    [imageError]
  )

  const onImageLoadError = useCallback(() => {
    setImageError(true)
  }, [])

  return (
    <div
      className={`Demio-Avatar ${imageError || !url ? '--error' : ''}`}
      style={avatarStyle}
      key={name}
      onClick={() => (onClick ? onClick() : null)}
      onKeyPress={() => (onClick ? onClick() : null)}
      role="button"
      tabIndex="0">
      {audioLevel > 0 && (
        <div className="Demio-Avatar__audio-level-container">
          <span
            className="Demio-Avatar__audio-level"
            style={{ transform: `scaleY(${audioLevel})` }}
          />
        </div>
      )}

      <img
        className="Demio-Avatar__image"
        crossOrigin="anonymous"
        src={url}
        onLoad={onLoad}
        onError={onImageLoadError}
        alt={`${name} avatar`}
      />

      {(!url || !loaded || imageError) && (
        <span
          className="Demio-Avatar__initials"
          style={{ fontSize: getFontSizeByElementSize({ elementSize: size }) }}>
          {initials}
        </span>
      )}

      {userStatus && (
        <Tooltip title={userStatus} align={{ offset: [0, 4] }}>
          <div className={`Demio-Avatar__status ${userStatus}`} style={avatarStatusStyle}>
            <span />
          </div>
        </Tooltip>
      )}
    </div>
  )
}

Avatar.propTypes = {
  url: PropTypes.string,
  style: PropTypes.shape({}),
  name: PropTypes.string.isRequired,
  opacity: PropTypes.number,
  userStatus: PropTypes.string,
  onClick: PropTypes.func,
  size: PropTypes.number,
  audioLevel: PropTypes.number,
}

Avatar.defaultProps = {
  style: {},
  url: '',
  opacity: 0,
  userStatus: '',
  onClick: () => null,
  size: 40,
  audioLevel: 0,
}

export default Avatar