import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, FormGroup, Label, Input} from 'reactstrap';
import {setSupportMessage} from '../../../actions/orders/processActions';
import {orderTexts} from '../../../constants/ordersConstants';

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

        this.state = {
            supportText: ''
        };
        this.setSupportMessage = this.setSupportMessage.bind(this);
    }
    calculateFixedPrice(quantity, price) {
        return quantity*price;
    }

    calculateRecurrentPrice(orderPackage) {
        return orderPackage.units*(orderPackage.packageRecuringPrice + orderPackage.packageServicePrice);
    }

    handleInputChange(event) {
        this.setState({supportText: event.target.value});
        event.preventDefault();
    }

    setSupportMessage() {
        this.props.dispatch(setSupportMessage(this.state.supportText));
    }

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

        return (
            <span id="send-support-mail-container">
            {orderInfo && orderPackages &&
                <div>
                    <div id="order-details">
                        <Row>
                            <Col>
                                <h5>{orderTexts.labels.ORDER_DETAILS}</h5>
                            </Col>
                        </Row>
                        <Row>
                            <Col xl="4">
                                <span className="subtitle">{orderTexts.labels.ORDER_NUMBER}:</span>
                            </Col>
                            <Col xl="8">
                                <span>{orderInfo.number}</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col xl="4">
                                <span className="subtitle">{orderTexts.labels.LOCATION_DETAILS}:</span>
                            </Col>
                            <Col xl="8">
                                <span>{orderInfo.reference || '-'}</span>
                            </Col>
                        </Row>
                    </div>
                    <div id="order-items" className="support-details">
                        <Row>
                            <Col>
                                <h5>{orderTexts.labels.ORDER_ITEMS}</h5>
                            </Col>
                        </Row>
                        { orderPackages.map((orderPackage, mapKey) =>
                            <div key={'order-package-'+mapKey} className="order-package-details">
                                <Row>
                                    <Col>
                                        <span className="fa fa-shopping-cart subtitle"></span>
                                        <span className="package-name"> {orderPackage.quantity} x {orderPackage.name}</span>
                                    </Col>
                                </Row>

                                {orderInfo.date_modified &&
                                    <Row>
                                        <Col>
                                            <span className="subtitle">{orderTexts.labels.END_OF_LIFE}:</span>
                                        </Col>
                                        <Col xl="8">
                                            <span>{orderPackage.date_completed}</span>
                                        </Col>
                                    </Row>
                                }
                                <Row>
                                    <Col>
                                        <span className="subtitle">{orderTexts.labels.STATUS}:</span>
                                    </Col>
                                    <Col xl="8">
                                        <span>{orderPackage.status}</span>
                                    </Col>
                                </Row>
                            </div>
                        )}
                    </div>
                    <div id="order-support-text" className="support-details">
                        <Row>
                            <Col>
                                <FormGroup>
                                    <Label for="supportText">{orderTexts.labels.ENTER_TEXT}</Label>
                                    <Input id="my-support-mail-text"
                                        type="textarea"
                                        name="supportText"
                                        value={this.state.supportText}
                                        onChange={(e) => this.handleInputChange(e)}
                                        onBlur={this.setSupportMessage}/>
                                </FormGroup>
                            </Col>
                        </Row>
                    </div>
                </div>
            }
        </span>
        );
    }
}

export default connect()(SupportMail);