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;