import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
import {Link} from 'react-router-dom';
import SupportMail from './SupportMail.jsx';
import {setDialogContent, setDialogOpenFlag} from '../../../actions/dialog/dialogActions';
import {sendSupportMail} from '../../../actions/orders/processActions';
import {orderTexts} from '../../../constants/ordersConstants';

class HistoryOrdersButtons extends Component {
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.sendSupportMail = this.sendSupportMail.bind(this);
        this.openDialogContent = this.openDialogContent.bind(this);

        this.state = {
            dropdownOpen: false
        };
    }

    toggle() {
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }

    openDialogContent() {
        const dialogContent = {
            buttons: [
                {
                    color: 'secondary',
                    name: orderTexts.buttons.SEND,
                    id: 'send-mail-to-support-btn',
                    action: this.sendSupportMail
                },
                {
                    color: 'secondary',
                    name: orderTexts.buttons.CANCEL,
                    id: 'cancel-send-mail-to-support-btn'
                }
            ],
            header: orderTexts.labels.SUPPORT_MESSAGE_HEADER,
            TagName: SupportMail,
            params: {orderInfo: this.props.order, orderPackages: this.props.order.packages}
        };

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

    sendSupportMail() {
        this.props.dispatch(sendSupportMail(this.props.order, this.props.order.packages, this.props.supportText));
    }

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

        return (
                <Dropdown size="sm" isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                    <DropdownToggle className="actions-button" caret>
                        {orderTexts.buttons.ACTIONS}
                    </DropdownToggle>
                    <DropdownMenu right>
                        <DropdownItem className="actions-item" onClick={this.openDialogContent}> {orderTexts.buttons.SUPPORT}
                        </DropdownItem>
                        <Link to={'/orders/' + order.id} className="actions-link">
                            <DropdownItem className="actions-item">
                                {orderTexts.buttons.DETAILS}
                            </DropdownItem>
                        </Link>
                    </DropdownMenu>
                </Dropdown>
        )
    }
}

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