import React from 'react'
import Order from './order'
import Login from './login'
import Workflow from './workflow';

import ActionType from '../enums/ActionType';

export const Wiaas = (props) => {

    const getSidebarItemClass = actionType => {
        if (actionType === props.actionType) {
            return 'selected';
        }
        return '';
    };

    return (
        <div id="wiaas">
            <div id="wiaas-sidebar">
                <div
                    className={getSidebarItemClass(ActionType.LOG_IN)}
                    onClick={() => { props.onActionTypeChange(ActionType.LOG_IN)}}
                >
                    Log In
                </div>
                <div
                    className={getSidebarItemClass(ActionType.SEND_ORDER)}
                    onClick={() => { props.onActionTypeChange(ActionType.SEND_ORDER)}}
                >
                   Order
                </div>
                <div
                    className={getSidebarItemClass(ActionType.WORKFLOW)}
                    onClick={() => { props.onActionTypeChange(ActionType.WORKFLOW)}}
                >
                    Workflow
                </div>
            </div>
            <div id="wiaas-container">
                {props.actionType === ActionType.LOG_IN && <Login  onLogInClicked={props.onLogInClicked}/>}
                {props.actionType === ActionType.SEND_ORDER && <Order products={props.products} onOrderClicked={props.onOrderClicked} />}
                {props.actionType === ActionType.WORKFLOW && <Workflow onRetrieveWorkflowClicked={props.onRetrieveWorkflowClicked} />}
            </div>
        </div>
    )
}

export default Wiaas