import AutoRequest from 'trc-client-core/src/components/AutoRequest';
import DataTable from 'bd-stampy/components/DataTable';
import Input from 'trc-client-core/src/components/Input';
import Label from 'bd-stampy/components/Label';
import PrintChartView from 'trc-client-core/src/report/PrintChartView';
import Loader from 'trc-client-core/src/components/Loader';
import ErrorMessage from 'trc-client-core/src/components/ErrorMessage';
import React from 'react';
import Time from 'trc-client-core/src/components/Time';
import {connect} from 'react-redux';
import {Link} from 'react-router';
import {technicalTrainingRequestsRequest} from 'trc-client-core/src/report/ReportActions';


var TechnicalTrainingRequests = React.createClass({
    displayName: 'TechnicalTrainingRequests',
    render() {
        var empty = <em className="InfoBox row">No Requests Found.</em>;

        var {trainingRequests, location, fetching} = this.props;

        if (fetching) {
            return <Loader/>;
        }

        if(!trainingRequests) {
            return <ErrorMessage />;
        }

        var tableSchema = [{
            heading: 'Course',
            filter: item => item.course.workshopName,
            render: item => {
                var {abbreviatedName, courseCode} = item.course
                return <Link to={`/course/${courseCode}`}>{`${abbreviatedName} - ${courseCode}`}</Link>
            }
        }, {
            heading: 'Name',
            filter: item => item.initiator.fullName
        }, {
            heading: 'Region',
            filter: item => item.initiator.regionCode
        }, {
            heading: 'Dealership',
            filter: item => item.initiator.dealerName
        }, {
            heading: 'Date and Time',
            filter: 'requestDate',
            render: item => <Time type="full">{item.requestDate}</Time>
        }];

        return (
            <div>
                <h1>Latest Technical Training Requests</h1>

                <Label>Filter Results</Label>
                <Input name="filter" className="w25" value={location.query.filter} queryString />

                <PrintChartView />
                <DataTable
                    modifier="data"
                    schema={tableSchema}
                    data={trainingRequests.toJS()}
                    search={location.query.filter || ''}
                    empty={empty}
                />
                <PrintChartView />
            </div>
        );
    }
});

const autoRequest = AutoRequest(['params'], (props) => {
    props.dispatch(technicalTrainingRequestsRequest());
});

const connectWithTrainingRequests = connect(state => ({
    trainingRequests: state.report.get('technicalTrainingRequests'),
    fetching: state.report.get('fetching')
}));

export default connectWithTrainingRequests(autoRequest(TechnicalTrainingRequests));