import React, { Component } from 'react';
import numeral from 'numeral';
import Campaign from './campaign.jsx';

class Advertiser extends Component {
  /**
  * Constructor
  */
  constructor(props) {
    super(props);
    this.state = {
      hidden: true
    };
  }

  /** */
  handleClick(event) {
    event.preventDefault();
    this.setState({
      hidden: !this.state.hidden
    });
  }

  /** */
  render() {
    let {
      advertiserId,
      advertiserName,
      totalAdvBudget,
      orders
    } = this.props;

    let totalBudget = numeral(totalAdvBudget).format('$ 0,000');
    let ordersDiv = null;
    if(!this.state.hidden) {
      ordersDiv = (<div className="campaignList">
        {orders.map((c) => (<Campaign key={c.orderId} {...c} />))}
      </div>);
    }

    return (
      <div className="campaignsByAdvertiser">
        <h2>
          <span onClick={this.handleClick.bind(this)} className="advertiser">{advertiserName}</span>
          <a className={`iconWrapper ${this.state.hidden ? 'ingeklapt' : 'uitgeklapt'}`}
             onClick={this.handleClick.bind(this)}
             dangerouslySetInnerHTML={{__html: window.pijlWit}} />
            <span className="budgetTitle">Aangevraagd budget:</span>
            <span className="budget">{totalBudget}</span>
        </h2>
        {ordersDiv}
      </div>
      );
  }
}

export default Advertiser;