import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {Row, Col, Button} from 'reactstrap';
import './style/Cart.css';
import {WiaasTable, WiaasTableBody} from '../../mainComponents/table/WiaasTable.jsx';
import {placeOrder, setCartItemsDisabled, previousStep, fetchCartItems, setPrevActionFct} from '../../actions/cart/cartActions';
import {setDialogContent, setDialogOpenFlag} from '../../actions/dialog/dialogActions';
import {cartTexts} from '../../constants/cartConstants';

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

        this.placeOrder = this.placeOrder.bind(this);
        this.handlePreviousBtn = this.handlePreviousBtn.bind(this);
    }

    componentDidMount() {
        this.props.dispatch(fetchCartItems());
        this.props.dispatch(setPrevActionFct(this.handlePreviousBtn));
    }

    setDialogParams(dialogContent) {
        this.props.dispatch(setDialogOpenFlag(true));
        this.props.dispatch(setDialogContent(dialogContent));
    }

    placeOrder() {
        this.props.dispatch(placeOrder(this.props.orderInfo));
    }

    handlePreviousBtn() {
        this.props.dispatch(previousStep());
        this.props.dispatch(setCartItemsDisabled(false));
    }

    getProjectName(idProject){
        const selectedProject = this.props.orderProjects.find(orderProject => {
            return orderProject.idProject === idProject
        });

        return selectedProject && selectedProject.projectName ? selectedProject.projectName : '-';
    }

    render() {
        const {orderInfo, isLoading, orderPlaced, orderPlacedRedirect} = this.props;
        const customerDetails = orderInfo && orderInfo.orderDetails;
        const items = orderInfo && orderInfo.cartItems;
        const dialogContent = {
            buttons: [
                {
                    color: 'success',
                    action: this.placeOrder,
                    name: cartTexts.buttons.YES,
                    id: 'place-order-confirmation'
                }, {
                    color: 'secondary',
                    name: cartTexts.buttons.CANCEL,
                    id: 'cancel-remove-item'
                }
            ],
            header: cartTexts.labels.CONFIRM,
            body: cartTexts.labels.CONFIRM_TEXT
        };

        return (
            <div id="cart-review-all-order-container">
                { (customerDetails && items) &&
                    <WiaasTable>
                        <WiaasTableBody id="cart-review-order-container">
                            { isLoading
                            ? <Row>
                                <Col className="loader">
                                    <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                                </Col>
                            </Row>
                            : <span>
                            <Row className="cart-customer-main-info-row">
                                <Col md="4">{cartTexts.labels.VAT}</Col>
                                <Col md="4" id="review-vatCode">{customerDetails.vatCode}</Col>
                            </Row>
                            <Row className="cart-customer-main-info-row">
                                <Col md="4">{cartTexts.labels.REFERENCE}</Col>
                                <Col md="4" id="review-reference">{customerDetails.details.reference ? customerDetails.details.reference : '-'}</Col>
                            </Row>
                            <Row className="cart-customer-main-info-row">
                                <Col md="4">{cartTexts.labels.BID}</Col>
                                <Col md="4" id="review-tender">{customerDetails.details.tender ? customerDetails.details.tender : '-'}</Col>
                            </Row>
                            <Row className="cart-customer-main-info-row">
                                <Col md="4">{cartTexts.labels.PROJECT}</Col>
                                <Col md="4" id="review-tender">{customerDetails.details.idProject ? this.getProjectName(customerDetails.details.idProject) : '-'}</Col>
                            </Row>
                            <div>
                                <h4>{cartTexts.labels.DELIVERY_ADDRESS}</h4>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.ADDRESS}</Col>
                                    <Col md="4"id="review-delivery-address">{customerDetails.delivery.detailedAddress}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.CITY}</Col>
                                    <Col md="4" id="review-delivery-city">{customerDetails.delivery.city}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.ZIP}</Col>
                                    <Col md="4" id="review-zip">{customerDetails.delivery.zipCode}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.COUNTRY}</Col>
                                    <Col md="4" id="review-delivery-country">{customerDetails.delivery.countryName}</Col>
                                </Row>
                            </div>

                            <div>
                                <h4>{cartTexts.labels.BILLING_ADDRESS}</h4>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.COMPANY}</Col>
                                    <Col md="4" id="review-billing-company">{customerDetails.companyName}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.FIRST_NAME}</Col>
                                    <Col md="4" id="review-billing-first-name">{customerDetails.billing.firstName || '-'}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.LAST_NAME}</Col>
                                    <Col md="4" id="review-billing-last-name">{customerDetails.billing.lastName || '-'}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.INVOICE_MAIL}</Col>
                                    <Col md="4" id="review-billing-mail">{customerDetails.billing.invoiceMail || '-'}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.ADDRESS}</Col>
                                    <Col md="4" id="review-billing-address">{customerDetails.billing.detailedAddress}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.CITY}</Col>
                                    <Col md="4" id="review-billing-city">{customerDetails.billing.city}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.ZIP}</Col>
                                    <Col md="4" id="review-billing-zip">{customerDetails.billing.zipCode}</Col>
                                </Row>
                                <Row className="cart-customer-main-info-row">
                                    <Col md="4">{cartTexts.labels.COUNTRY}</Col>
                                    <Col md="4" id="review-billing-country">{customerDetails.billing.countryName}</Col>
                                </Row>
                            </div>
                            </span>
                            }
                            <Row>
                                <Col xl={{size:3, offset:9}} sm="12" xs="12" className="button-cart">
                                    {
                                        (customerDetails && !isLoading) &&
                                        <Button className="place-order-btn" onClick={()=>{this.setDialogParams(dialogContent)}}>Confirm order</Button>
                                    }
                                </Col>
                            </Row>
                            {orderPlaced && orderPlacedRedirect && <Redirect push to="/" />}
                        </WiaasTableBody>
                    </WiaasTable>
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    orderInfo: state.cartReducer.orderInfo,
    isLoading: state.cartReducer.isLoading,
    orderPlaced: state.cartReducer.orderPlaced,
    orderPlacedRedirect: state.cartReducer.orderPlacedRedirect,
    orderProjects: state.orderProjectsReducer.orderProjects
});

export default connect(mapStateToProps)(CartReviewOrderContainer);
