import React, {Component} from 'react'
import styled from 'styled-components'
import UnstyledButton from 'components/utils/button'
import {Container, Badge, Description, Title, Statistics} from './styles.react.scss'
import auto_bind from 'common/auto_bind'
import {human_plural} from 'common/utilities'
import moment from 'common/moment'
import {color} from 'common/styles'
import {get_mission_status_elements} from 'common/missions'

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

  render_statistics() {
    let {accepted_count, assigned_count, empty_count, status} = this.props
    let statistics = []
    if (assigned_count) {
      statistics.push(human_plural(assigned_count, "%% poste validé", "%% postes validés"))
    }
    if (status != 'assigned') {
      if (accepted_count) {
        statistics.push(human_plural(accepted_count, "%% candidat intéressé", "%% candidats intéressés"))
      }
      if (status == "pending_selection") {
        statistics.push(human_plural(empty_count, "%% poste à reproposer", "%% postes à reproposer"))
      } else {
        statistics.push(human_plural(empty_count, "%% poste vacant", "%% postes vacants"))
      }
    }
    return statistics.join(', ')
  }

  render() {
    const {status, label, simple, className, will_send_notification_at, cancel_update_notification} = this.props
    const {icon, name, color} = get_mission_status_elements(status)
    const notification_sent = will_send_notification_at && moment().isAfter(will_send_notification_at)
    return (
      <Container className={className}>
        <Badge variant={{[status]: true}}>
          {icon}
        </Badge>
        {simple ? null : (
          <Description>
            <Title>
              {label} {name}
            </Title>
            <Statistics>
              {this.render_statistics()}
            </Statistics>
          </Description>
        )}
        {simple || !will_send_notification_at ? null : (
          <Updating>
            Une notification de mise à jour sera envoyée dans 1 minute
            <Button dark_background discreet done={notification_sent} onClick={cancel_update_notification}>
              {notification_sent ? "Envoyée" : "Annuler"}
            </Button>
          </Updating>
        )}
      </Container>
    )
  }
}

MissionStatus.defaultProps = {
  label: 'Prestation',
}

const Updating = styled.div`
  background-color: ${color('black', 'intense')};
  border-radius: 2px;
  padding: 14px 24px;
  color: white;
  margin: 0 20px;
  box-shadow: 0 0 3px ${color('black', 'intense')};
  display: flex;
  align-items: center;
`
const Button = styled(UnstyledButton)`
  margin: -14px 0 -14px 14px;
`