import React, {Component} from 'react';
import {Row, Col, Container} from 'reactstrap';
import WiaasBox from '../../../../mainComponents/box/WiaasBox.jsx';
import ValidateQuestionnaire from './ValidateQuestionnaire.jsx';
import CustomerAcceptance from './CustomerAcceptance.jsx';

const stepActions = {
    'validate-questionnaire' : ValidateQuestionnaire,
    'customer-acceptance' : CustomerAcceptance
}

class OrderStep extends Component {
    isActiveStep(status) {
        return status === 'pending' ;
    }

    getStepTitle(step, stepNumber) {
        return stepNumber + '. ' + step.shortDesc;
    }

    getDayFromActual(step) {
        const date = step.actualDate || step.now;
        const dateParts = date.split(' ');

        return dateParts[0];
    }

    getMonthFromActual(step) {
        const date = step.actualDate || step.now;
        const dateParts = date.split(' ');
        const dateParts2 = dateParts[1].split(',');

        return dateParts2[0];
    }

    render() {
        const {step, stepNumber, isStepVisible} = this.props;
        const TagName = step.actionCode !== 'manual' && stepActions[step.actionCode] ? stepActions[step.actionCode] : null;

        return (
            <Container fluid={true} className="order-step">
                {
                    isStepVisible(step) &&
                    <Row className="step-layer">
                        <Col xl="1" lg="1" md="2" xs="2" className="step-circle-layer">
                            <div className="step-line"></div>
                            <div className={'step-circle ' + step.status}>
                                {!this.isActiveStep(step.status) &&
                                    <span>
                                        <div>{this.getDayFromActual(step)}</div>
                                        <div>{this.getMonthFromActual(step)}</div>
                                    </span>
                                }
                            </div>
                        </Col>
                        <Col xl="11" lg="11" md="10" xs="10" className="step-box-layer">
                            <WiaasBox isContentVisible={this.isActiveStep(step.status)} className={'step-box'} mainTitle={this.getStepTitle(step, stepNumber)}>
                                {
                                    (this.isActiveStep(step.status) && TagName) &&
                                    <Col>
                                        {
                                            (TagName && this.isActiveStep(step.status)) && <TagName step={step}/>
                                        }
                                    </Col>
                                }
                            </WiaasBox>
                        </Col>
                    </Row>

                }
            </Container>
        );
    }
}

export default OrderStep;
