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 TopologyGroup = ({ topology, interactionLevel }) => {
    if (!topology) {
        return <Group />
    }

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

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

TopologyGroup.propTypes = {
    topology: Shapes.Topology,
    interactionLevel: Shapes.InteractionLevel,
}

export default TopologyGroup