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

class ValidateQuestionnaire extends Component {

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

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

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

        return (
            <div id="validate-questionnaire" className="validate-questionnaire">
                {
                    customerQuestionnaires &&
                    customerQuestionnaires.map((customerQuestionnaryAction) =>
                        <ValidateQuestionnaireItem
                            action={customerQuestionnaryAction}
                            key={'validate-questionnaire-' + customerQuestionnaryAction.action_id}
                            orderPackage={orderPackages.find( orderPackage => orderPackage.orderItemId === customerQuestionnaryAction.item_id)}
                        />
                    )
                }
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(ValidateQuestionnaire);