import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Container} from 'reactstrap';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import CartUploadDocument from './components/CartUploadDocument.jsx';
import './style/CartUploadDocumentsContainer.css';
import {cartMessages} from '../../constants/cartConstants';
import {updateMessages} from '../../actions/notification/notificationActions';
import {nextStep, setNextActionFct} from '../../actions/cart/cartActions';

const DOCUMENT_TYPES = {
    TEMPLATE_QUESTINNAIRE: 1,
    QUESTIONNAIRE: 2,
    TEMPLATE_AGREEMENT: 6,
    AGREEMENT: 7
};

class CartCustomerQuestionnaireContainer extends Component {
    constructor(props) {
        super(props);

        this.getDocument = this.getDocument.bind(this);
        this.handleStepChange = this.handleStepChange.bind(this);
    }

    componentDidMount() {
        this.props.dispatch(setNextActionFct(this.handleStepChange));
    }

    getDocument(idDocumentType, idPackage, documents) {
        return documents[idDocumentType] && documents[idDocumentType][idPackage]
            ? documents[idDocumentType][idPackage]
            : null;
    }

    handleStepChange() {
        if(this.props.cartDocuments && this.props.cartDocuments.areFilesUploaded) {
            this.props.dispatch(nextStep());
        } else {
            this.props.dispatch(updateMessages([{code:'warning', message: 'DOCS_MISSING'}], cartMessages));
        }
    }

    render() {
        const {cartItems, cartDocuments, isLoading} = this.props;
        const packages = cartItems ? cartItems.map((cartItem) => cartItem.idPackage) : [];

        return (
            <div id="cart-upload-documents-container">
                <Container fluid={true}>
                    <Row>
                            <Col lg="12" xs="12">
                                {
                                    isLoading &&
                                    <div className="loader">
                                        <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                                    </div>
                                }
                                {
                                    (cartItems && cartDocuments && !isLoading) &&
                                    cartItems.map((cartItem, mapKey) =>
                                    <div key={'cart-upload-' + mapKey}>
                                        <WiaasBox mainTitle={cartItem.packageName} className="no-margin-box">
                                            <div className="upload-layer">
                                                <Row>
                                                    <CartUploadDocument
                                                           idDocumentType={DOCUMENT_TYPES.QUESTIONNAIRE}
                                                           packages={packages}
                                                           cartItem={cartItem}
                                                           templateDocument={this.getDocument(DOCUMENT_TYPES.TEMPLATE_QUESTINNAIRE, cartItem.idPackage, cartDocuments['templates'])}
                                                           uploadedDocument={this.getDocument(DOCUMENT_TYPES.QUESTIONNAIRE, cartItem.idPackage, cartDocuments['uploaded'])}
                                                           />
                                                    <CartUploadDocument
                                                            idDocumentType={DOCUMENT_TYPES.AGREEMENT}
                                                            packages={packages}
                                                            cartItem={cartItem}
                                                            templateDocument={this.getDocument(DOCUMENT_TYPES.TEMPLATE_AGREEMENT, cartItem.idPackage, cartDocuments['templates'])}
                                                            uploadedDocument={this.getDocument(DOCUMENT_TYPES.AGREEMENT, cartItem.idPackage, cartDocuments['uploaded'])}
                                                            />
                                                </Row>
                                            </div>
                                        </WiaasBox>
                                    </div>)
                            }
                            </Col>
                        </Row>
                </Container>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    cartItems: state.cartReducer.cartItems,
    cartDocuments: state.cartReducer.cartDocuments,
    isLoading: state.cartReducer.isLoading
});

export default connect(mapStateToProps)(CartCustomerQuestionnaireContainer);