import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Button, Container, Row, Col} from 'reactstrap';
import WiaasBox from '../../../mainComponents/box/WiaasBox.jsx';
import AddComment from './AddComment.jsx';
import {addComment} from '../../../actions/orders/processActions';
import {orderTexts} from '../../../constants/ordersConstants';

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

        this.onEditorChange = this.onEditorChange.bind(this);
        this.addNewComment = this.addNewComment.bind(this);
        this.state = {
          newComment: ''
        };
    }

    addNewComment(){
        this.props.dispatch(addComment(this.props.orderInfo.id, this.state.newComment));
    }

    onEditorChange(newComment){
        this.setState({newComment});
    }

    getOffset(isOwner){
        return isOwner ? 6 : 0;
    }

    getClassByOwner(isOwner){
        return isOwner ? 'mine' : '';
    }

    render() {
        const {orderComments} = this.props;

        return (
            <div id="order-comments" className="order-comments">
                <WiaasBox mainTitle="Comments">
                    <Container fluid={true} className="order-coments-body">
                        <Row>
                            <Col xl="6">
                                {
                                    orderComments &&
                                    orderComments.map((orderComment, index) =>
                                    <Row key={'order-comment-' + index}>
                                        <Col xl={{size:6, offset:this.getOffset(orderComment.isOwner)}}>
                                            <div className={'order-comment ' + this.getClassByOwner(orderComment.isOwner)} key={'order-comment-' + index}>
                                                <div className="order-comment-header">{orderComment.username} - {orderComment.addDate}</div>
                                                <div dangerouslySetInnerHTML={{__html: orderComment.comment}}></div>
                                            </div>
                                        </Col>
                                    </Row>

                                    )
                                }
                            </Col>
                            <Col xl="6">
                                <AddComment onEditorChange={this.onEditorChange}/>
                                <Button onClick={()=>{this.addNewComment()}} className="new-comment-button" color="secondary">{orderTexts.buttons.ADD_COMMENT}</Button>
                            </Col>
                        </Row>
                    </Container>
                </WiaasBox>
            </div>
        );
    }
}

export default connect()(OrderComments);
