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;