import React from 'react'
import {connect} from 'react-redux'
import classNames from 'classnames/bind'
import Button from 'components/utils/button'
import MissionProposal from 'components/mission_proposal'
import {get_mission_proposals} from 'selectors/missions'

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

const SendMission = (props) => {
  return (
    <div className={cx('new-mission')}>
      <div className={cx('new-mission__preview')}>
        <MissionProposal {...props} />
        <div className={cx('new-mission__preview-button')}>
          <Button onClick={props.on_confirm}>
            Envoyer la mission
          </Button>
        </div>
      </div>
    </div>
  )
}

export default connect(
  (state, {mission_id}) => get_mission_proposals(state)[mission_id]
)(SendMission)