import React from "react";
import { Group } from "react-konva";
import GrayContainer from "../../../../containers/app/map/GrayContainer";
import RoomContainer from "../../../../containers/app/map/RoomContainer";
import Shapes from "../../../../shapes/index";

const DatacenterGroup = ({ datacenter, interactionLevel }) => {
  if (!datacenter) {
    return <Group />;
  }

  if (interactionLevel.mode === "BUILDING") {
    return (
      <Group>
        {datacenter.roomIds.map(roomId => (
          <RoomContainer key={roomId} roomId={roomId} />
        ))}
      </Group>
    );
  }

  return (
    <Group>
      {datacenter.roomIds
        .filter(roomId => roomId !== interactionLevel.roomId)
        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
      {interactionLevel.mode === "ROOM" ? <GrayContainer /> : null}
      {datacenter.roomIds
        .filter(roomId => roomId === interactionLevel.roomId)
        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
    </Group>
  );
};

DatacenterGroup.propTypes = {
  datacenter: Shapes.Datacenter,
  interactionLevel: Shapes.InteractionLevel
};

export default DatacenterGroup;