import React, {Component} from 'react'
import classNames from 'classnames/bind'
import {MdPlace, MdInsertInvitation} from 'react-icons/lib/md'
import MissionStatus from 'components/mission_status/mission_status'
import {card_width} from '../common/constants'
import moment from '../common/moment'
import {array_from_set} from '../common/utilities'
import {mission_period} from '../common/missions'

const cx = classNames.bind(require('../styles/mission_card.scss'))

const MissionCard = (props) => {
  return (
    <div className={cx('mission-card', `mission-card_status_${props.mission.status}`)} style={{width: card_width}}>
      <div className={cx('mission-card__badge-container')}>
        <MissionStatus simple {...props.mission} />
      </div>
      <div className={cx('mission-card__main')}>
        <div className={cx('mission-card__main-row')}>
          <div className={cx('mission-card__workplace-name')}>
            {props.mission.workplace.name}
          </div>
          <div className={cx('mission-card__period')}>
            {mission_period(props.mission)}
          </div>
        </div>
        <div className={cx('mission-card__main-row')}>
          <div className={cx('mission-card__workplace-address')}>
            <span className={cx('mission-card__workplace-address-icon')}>
              <MdPlace />
            </span>
            {props.mission.workplace.address}
          </div>
          <div className={cx('mission-card__creation')}>
            {`Créée le ${moment(props.mission.created_at).format("DD/MM/YYYY")} par ${props.mission.recruiter.first_name} ${props.mission.recruiter.last_name}`}
          </div>
        </div>
      </div>
    </div>
  )
}

export default MissionCard