import moment from 'moment';
import numeral from 'numeral';
import OrderDetails from './orderDetails.jsx';
import OrderPart from './orderpart.jsx';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { orderDetails } from '../actions/campaignActions';

class OrderPartList extends Component {
  /** */
  componentWillMount() {
    let { medium, orderId } = this.props.params;
    this.props.dispatch(orderDetails(medium, orderId));
  }

  /** */
  render() {
    let { medium, orderId } = this.props.params;
    let { orderDetails } = this.props;
    let advertiser = orderDetails.get('data');

    if(!advertiser) {
      return (<div></div>);
    }

    let campaignPath = `/campaigns/${medium}/${orderId}`;
    let uitzendSchemaPath = `/campaigns/${medium}/spots/${orderId}`;
    let summaryPath = `/campaigns/${medium}/summary/${orderId}`;
    let formattedStart = moment(advertiser.order.orderStartDate).format('D MMMM YYYY');
    let formattedEnd = moment(advertiser.order.orderEndDate).format('D MMMM YYYY');
    let budget = numeral(advertiser.order.orderBudget).format('$ 0,000');
    let grps = numeral(advertiser.order.totalReqGrp).format('0.00');

    return (
      <div className="listContent">
        <OrderDetails advertiserName={advertiser.advertiserName} order={advertiser.order} />

        <div className="tablist">
          <Link className="active" to={campaignPath}>Deelorder(s)</Link>
          { medium !== 'inter' ? <Link to={uitzendSchemaPath}>Uitzendschema</Link> : null }
          { medium === 'radio' ? <Link to={summaryPath}>Samenvatting</Link> : null }
        </div>

        {advertiser.order.orderParts.map((o) => {
          return (<OrderPart key={`${o.orderId}${o.orderPartId}`} order={o} showUitzendschemaLink={true} />);
        })}
      </div>
      );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    orderDetails: state.orderDetails
  };
};

export default connect(mapStateToProps)(OrderPartList);