import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Button, Tooltip} from 'reactstrap';
import {orderTexts} from '../../constants/ordersConstants';
import {setDialogContent, setDialogOpenFlag} from '../../actions/dialog/dialogActions';
import InstallationSchedulingContainer from './InstallationSchedulingContainer.jsx';

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

        this.state = {
            tooltipOpen: false,
            isScheduleBtnClicked: false
        };

        this.toggle = this.toggle.bind(this);
        this.handleScheduleBtn = this.handleScheduleBtn.bind(this);
        this.setContentDialog = this.setContentDialog.bind(this);
        this.openDialogContent = this.openDialogContent.bind(this);
    }

    getClass(buttonView) {
        const view = this.props.params.getActiveView();

        return buttonView === view ? 'process-nav-div selected-nav' : 'process-nav-div';
    }

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

    handleScheduleBtn() {
        this.setState({isScheduleBtnClicked: !this.state.isScheduleBtnClicked});
    }

    setContentDialog() {
        const {installationData} = this.props.params;

        return {
            class: 'installation-scheduling',
            hasCloseIcon: true,
            header: orderTexts.labels.INSTALLATION_SCHEDULE_HEADER,
            TagName: InstallationSchedulingContainer,
            params: {
                orderPackages: installationData.packages,
                areComponentsDisabled: installationData.areComponentsDisabled,
                isInstallationSet: installationData.isInstallationSet,
                isInstallationInPackage: installationData.isInstallationInPackage,
                areAllShippingDatesConfirmed: installationData.areAllShippingDatesConfirmed,
                openDialogContent: this.openDialogContent
            }
        };
    }

    openDialogContent() {
        if(!this.props.params.installationData.isSchedulingDisabled[this.props.params.orderInfo.id]) {
            const dialogContent = this.setContentDialog();

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

    getButtonClass() {
        const {installationData, orderInfo} = this.props.params;

        return installationData.isSchedulingDisabled[orderInfo.id] ? 'schedule-inactive' : 'schedule-active';
    }

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

        return (
            <Row id="process-nav" className="process-nav">
                <Col xl="2" lg="2" md="4" sm="12" xs="12" className="process-nav-buttons">
                    <div className="wiaas-main-title">
                        {orderTexts.labels.ORDER} {orderInfo.orderNumber} <div className={'status-layer ' + orderInfo.status}>{orderTexts.statuses[orderInfo.status]}</div>
                    </div>
                </Col>
                <Col xl="2" lg="2" md="2" sm="12" xs="12" className="process-nav-buttons">
                    <Button className={"schedule-installation-btn " + this.getButtonClass()}
                        id="schedule-installation-button"
                        onClick={this.openDialogContent}>
                        {orderTexts.buttons.SCHEDULE_INSTALLATION}
                    </Button>
                    <Tooltip placement="bottom" isOpen={this.state.tooltipOpen} target="schedule-installation-button" toggle={this.toggle}>
                        {
                            installationData.isSchedulingDisabled[orderInfo.id]
                            ? installationData.isOnePackageAndInstallationNotExists[orderInfo.id]
                                ? orderTexts.labels.SCHEDULE_INSTALLATION_NOT_EXIST
                                : orderTexts.labels.SCHEDULE_INSTALLATION_DISABLED
                            : orderTexts.labels.SCHEDULE_INSTALLATION_ENABLED
                        }
                    </Tooltip>
                </Col>
                <Col xl="4" lg="6" md="6" sm="12" xs="12" className="process-menu">
                    <div className={this.getClass('info')} onClick={()=>{onViewChange('info')}}>{orderTexts.labels.ORDER_INFO}</div>
                    <div className={this.getClass('packages')} onClick={()=>{onViewChange('packages')}}>{orderTexts.labels.PACKAGES}</div>
                    <div className={this.getClass('comments')} onClick={()=>{onViewChange('comments')}}>{orderTexts.labels.COMMENTS}</div>
                    <div className={this.getClass('documents')} onClick={()=>{onViewChange('documents')}}>{orderTexts.labels.DOCUMENTS}</div>
                </Col>
            </Row>
        );
    }
}

export default connect()(ProcessNavContainer);
