import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchCustomerDocuments, fetchValidationComments} from '../../../../actions/orders/processActions';
import ValidateQuestionnaireItem from './ValidateQuestionnaireItem.jsx';
import '../../style/ValidateQuestionnaire.css';

class ValidateQuestionnaire extends Component {

    componentDidMount(){
        const {idOrder, idProcessStep} = this.props.step;
        this.props.dispatch(fetchCustomerDocuments(idOrder, 'orderQuestionaire'));
        this.props.dispatch(fetchValidationComments(idOrder, idProcessStep, 'invalidQuestionnaireComment'));
    }

    findById(orderPackage, idOrderPackagePair){
        const idPackage = idOrderPackagePair.split('-')[1];
        return orderPackage.idPackage === parseInt(idPackage, 10);
    }

    render() {
        const {customerDocuments, validationComments, orderPackages} = this.props;

        return (
            <div id="validate-questionnaire" className="validate-questionnaire">
                {
                    customerDocuments &&
                    Object.keys(customerDocuments).map((idOrderPackagePair) =>
                        <ValidateQuestionnaireItem
                            customerDocuments={customerDocuments[idOrderPackagePair]}
                            validationComments={validationComments && validationComments[idOrderPackagePair] ? validationComments[idOrderPackagePair] : []}
                            orderPackage={orderPackages.find((orderPackage)=>{ return this.findById(orderPackage, idOrderPackagePair)})}
                            key={'validate-questionnaire-' + idOrderPackagePair}/>
                    )
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    customerDocuments: state.processReducer.customerDocuments,
    validationComments: state.processReducer.validationComments,
    orderPackages: state.processReducer.orderInfo.packages
});

export default connect(mapStateToProps)(ValidateQuestionnaire);