import React, {Component} from 'react';
import {connect} from 'react-redux';
import OrderDocumentsGroup from './OrderDocumentsGroup.jsx';
import {orderTexts} from '../../../constants/ordersConstants';
import WiaasBox from "../../../mainComponents/box/WiaasBox";

class OrderDocuments extends Component {
    render() {
        const {orderInfo} = this.props;

        return (
            <div id="order-documents" className="order-documents">
                {
                    orderInfo.packages.map(orderPackage => (
                        <OrderDocumentsGroup
                            key={'order-package-' + orderPackage.id}
                            orderId={orderInfo.id}
                            documentsGroup={orderPackage}
                        />))
                }
                {
                    orderInfo.documents && <div>
                        <WiaasBox mainTitle={orderTexts.labels.OTHER_DOCS}>
                            {
                                orderInfo.documents.map((document, index) => (
                                    <a className="document-link-big" key={'order-document-' + index} download href={document.url}>
                                        <span className="document-link">
                                             <i className={`fa fa-4x fa-${document.icon}`} aria-hidden="true"></i>
                                            <div>
                                                {document.name}
                                            </div>
                                        </span>
                                    </a>
                                ))
                            }
                        </WiaasBox>
                    </div>
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    orderInfo: state.processReducer.orderInfo
});
export default connect(mapStateToProps)(OrderDocuments);
