import React, {Component} from 'react'
import classNames from 'classnames/bind'
import {MdEvent, MdPlace} from 'react-icons/lib/md'
import LineBrokenText from '../components/line_broken_text'
import {make_periods} from '../common/calendar'
import {mission_period} from '../common/missions'
import {human_join, property_getter} from '../common/utilities'

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

export default ({id, events, workplace, fields}) => (
  <div>
    <div className={cx('user-mission__events')}>
      <div className={cx('user-mission__events-icon')}>
        <MdEvent />
      </div>
      <div className={cx('user-mission__events-periods')}>
        {make_periods(events).map((period) => (
          <div key={period.events[0].id} className={cx('user-mission__events-periods-period')}>
            {mission_period(period)}
          </div>
        ))}
      </div>
    </div>
    {workplace ? (
      <div className={cx('user-mission__place')}>
        <div className={cx('user-mission__place-icon')}>
          <MdPlace />
        </div>
        <div className={cx('user-mission__place-label')}>
          <div className={cx('user-mission__place-label-name')}>
            {workplace.name}
          </div>
          <div className={cx('user-mission__place-label-address', {'user-mission__place-label-address-empty' : !workplace.name && !workplace.address})}>
            {workplace.address || 'Non renseigné'}
          </div>
        </div>
      </div>
    ) : null}
    {fields.map((field) => <Field key={field.id} {...field} />)}
  </div>
)

const Field = ({name, ...field}) => (
  <div className={cx('user-mission__field')}>
    <span className={cx('user-mission__field-name')}>
      {`${name} : `}
    </span>
    <FieldContent {...field} />
  </div>
)

const FieldContent = ({category, comment, selected_values, selected_value, empty}) => {
  if (empty) {
    return (
      <span className={cx('user-mission__field-empty')}>
        Vide
      </span>
    )
  }
  switch (category) {
    case 'comment':
      return (
        <LineBrokenText>
          {comment}
        </LineBrokenText>
      )
    case 'non_exclusive':
      return (
        <span>
          {human_join(selected_values.map(property_getter('name')))}
        </span>
      )
    case 'exclusive':
      return (
        <span>
          {selected_value.name}
        </span>
      )
    default:
      return null
  }
}