import React, {Component} from 'react'
import InstantJob from './instant_job'
import {color} from '../common/constants'
import {set_current_recipient} from '../actions/users'
import classNames from 'classnames/bind'
import {MdTextsms, MdPerson} from 'react-icons/lib/md'
import {get_user_status} from '../common/users'
import {filter_hash} from '../common/utilities.es6.jsx'
import auto_bind from '../common/auto_bind'
import store from 'common/store'

let cx = classNames.bind(require('../styles/profile_image.scss'))

export default class ProfileImage extends Component {
  constructor(props) {
    super(props)
    auto_bind(this)
  }

  get_status() {
    return this.props.status || get_user_status(this.props)
  }

  on_click() {
    const {id, app_name} = this.props
    if (id && app_name) {
      store.dispatch(set_current_recipient(id))
      return true
    } else {
      return false
    }
  }

  render() {
    let user_status
    if (!this.props.hide_status) {
      user_status = this.get_status()
    }
    const {first_name, last_name, avatar_url} = this.props
    const initials = first_name && last_name ?
      `${first_name.substring(0, 1)}${last_name.substring(0, 1)}`
      : null
    return (
      <div
        className={cx(
          'profile-image',
          {
            'profile-image_has-app-clickable' : user_status && user_status.status == 'active',
            'profile-image_large' : this.props.large,
            'profile-image_huge' : this.props.huge,
          }
        )}
        style={avatar_url ? {'backgroundImage': `url(https:${avatar_url})`, 'backgroundSize': 'contain'} : {}}
        onClick={(event) => {
        if (this.on_click()) {
          event.stopPropagation()
        }
      }}
      >
        <div className={cx('profile-image__icon')}>
          <MdTextsms/>
        </div>
        {avatar_url ? null : initials ? (
          <span className={cx('profile-image__initials')}>{initials}</span>
        ) : (
          <div className={cx('profile-image__person')}>
            <MdPerson/>
          </div>
        )}
        {user_status && user_status.icon ? (
          <div className={cx('profile-image__status')}>
            {user_status.icon}
          </div>
        ) : null}
      </div>
    )
  }
}