import React from 'react'
import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer'
import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer'
import BackToRoomContainer from '../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer'
import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
import './RackSidebarComponent.css'

const RackSidebarComponent = ({ inSimulation, rackId }) => {
    return (
        <div className="rack-sidebar-container flex-column">
            <div className="rack-sidebar-header-container">
                <RackNameContainer/>
                <BackToRoomContainer/>
                {inSimulation ? (
                    <div>
                        <LoadBarContainer objectType="rack" objectId={rackId}/>
                        <LoadChartContainer objectType="rack" objectId={rackId}/>
                    </div>
                ) : (
                    <div>
                        <DeleteRackContainer/>
                    </div>
                )}
            </div>
            <div className="machine-list-container mt-2">
                <MachineListContainer/>
            </div>
        </div>
    )
}

export default RackSidebarComponent