import _ from 'underscore';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import Sink from './sink';
import sinkLayoutGen from './sink-layout-gen';

class View extends Component {
    render() {
        if (this.props.job_id) {
            return (
                <ViewLayout {...this.props} />
            )
        }

        return false;
    }
}

class ViewLayout extends Component {
    componentWillMount() {
        this.componentCharts = [];
    }

    addComponentChart(componentChart) {
        this.componentCharts.push(componentChart);
    }

    generateViewColumns(sinkCols) {
        let self = this;
        let { jobEvents, sinks } = this.props;

        return sinkCols.map(sinkCol => {
            let sink = sinks.get(sinkCol);
            return (
                <Sink
                    sink={sink}
                    sinks={sinks}
                    width={100 / sinkCols.length}
                    jobEvents={jobEvents}
                    addComponentChart={self.addComponentChart.bind(self)}
                    componentCharts={self.componentCharts}
                    key={sink.sink_id}/>
            )
        });
    }

    render() {
        let { sinks, sinkLayout, job_id } = this.props;
        let rows = sinkLayout.map((sinkRow, index) => {
            return (
                <div className="flex-row" key={index}>
                    {this.generateViewColumns(sinkRow)}
                </div>
            )
        })

        return (
            <div className="juttle-view sink-views" key={job_id}>
                {rows}
            </div>
        );

    }
}

export default connect(
    state => {
        return {
            sinks: state.sinks,
            sinkLayout: sinkLayoutGen(state.sinks),
            job_id: state.job_id
        };
    }
)(View)

@@ -321,16 +321,40 @@
 s.props%7D
+ key=%7Bthis.props.job_id%7D
  /%3E%0A    
@@ -1260,16 +1260,8 @@
 yout
-, job_id
  %7D =
@@ -1582,21 +1582,8 @@
 ews%22
- key=%7Bjob_id%7D
 %3E%0A  

Move job_id key to appropriate place