import Channel from './channel.jsx';
import RatecardNews from './ratecardNews.jsx';
import React, { Component } from 'react';
import UmbracoContent from './umbracoContent.jsx';
import { checkToken } from '../actions/loginActions';
import { connect } from 'react-redux';
import { currentSpots } from '../actions/campaignActions';
import { Link } from 'react-router';
import { ratecardNewsList } from '../actions/generalActions';
import { umbracoRenderedPage } from '../actions/umbracoActions';

class Dashboard extends Component {
  /**
   *
   */
  componentDidMount() {
    let { dispatch } = this.props;
    dispatch(checkToken());
    dispatch(ratecardNewsList());
    dispatch(currentSpots());
    dispatch(umbracoRenderedPage(window.portalPageId));
  }

  /**
   *
   */
  componentDidUpdate(prevProps, prevState) {
    let { dispatch } = this.props;
    if(prevProps.params !== this.props.params) {
      dispatch(checkToken());
      dispatch(ratecardNewsList());
      dispatch(currentSpots());
      dispatch(umbracoRenderedPage(window.portalPageId));
    }

    window.slimmage.checkResponsiveImages();
  }

  /**
   *
   */
  render() {
    let {
      currentSpots,
      ratecardNews,
      umbracoPage,
    } = this.props;

    let currentSpotsDiv = null;
    if(currentSpots.size > 0) {
      currentSpotsDiv = (<div className="listContent currentSpots">
          <h2 className="uppercase size20pt">Nu en straks</h2>
          <p>Jouw spots die binnen de komende 2 uur uitgezonden worden.</p>
          {currentSpots.map((m) => {
            // per medium een blokje
            let icon = m.medium === 'tv' ? window.icon_televisie_wit : window.icon_radio_wit;
            return (<div className={`medium ${m.medium}`}>
              <div className="mediumTitle bg-blauw-middel">
                <h3 className="uppercase">
                  <span className="iconWrapper" dangerouslySetInnerHTML={{__html: icon}} />
                  <span className="text">{m.medium}</span>
                </h3>
                <Link to={`/campaigns/${m.medium}`}>
                  <span>Bekijk lopende campagnes</span>
                  <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.pijlWit}} />
                </Link>
              </div>
              {m.channels.map((c) => {
                // per channel een blokje met spots
                return (<Channel key={c.channelAka} {...c} />);
              })}
            </div>);
          })}
        </div>);
    }
    else {
      currentSpotsDiv = (<div className="listContent">
          <h2 className="uppercase size20pt">Nu & straks</h2>
          <p>Geen spots beschikbaar.</p>
        </div>);
    }

    let output = null;
    if(umbracoPage && umbracoPage.get('rows') && umbracoPage.get('rows').length > 0) {
      /**
       Toon de eerste rij met blokken naast het spotjes-carrousel, de rest
       van de rijen mogen daaronder als losse rijen getoond worden.
       */
      output = (<div>
        <div className="outer-portal">
          <div>
            <div className="row">
              <div className="medium-12 columns">
                {currentSpotsDiv}
              </div>
            </div>
          </div>
        </div>
        <div className="outer-portal">
          <div>
            <div className="row">
              <div className="medium-8 columns">
                <RatecardNews news={ratecardNews} />
              </div>
              <div className="medium-4 columns">
                <UmbracoContent page={umbracoPage} filter={(r, idx, arr) => idx === 0} blocks={true} />
              </div>
            </div>
          </div>
        </div>
        <UmbracoContent page={umbracoPage} filter={
          (r, idx, arr) => (r.Name !== 'loginscherm-inleiding' && r.Name !== 'loginscherm-afsluiter' && idx !== 0)
        } />
      </div>);
    }
    else {
      output = (<div className="outer-portal">
        <div>
          <div className="row">
            <div className="medium-12 columns">
            {currentSpotsDiv}
            </div>
          </div>
        </div>
      </div>);
    }

    return (<div>
      {output}
    </div>);
  }
}

const mapStateToProps = (state) => {
  return {
    currentSpots: state.currentSpots,
    ratecardNews: state.ratecardNews,
    umbracoPage: state.umbracoPage,
  };
};

export default connect(mapStateToProps)(Dashboard);