import { Object3D } from "three";
import { useDeletableEventSphere, useSelectedEventSphere } from "../../../../store/simulation/useSimulationStore";
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
import * as CONSTANTS from "../../../../types/world/worldConstants";
import OutlineInstance from "./outlineInstance/outlineInstance";

function flattenChildren(children: Object3D[]): Object3D[] {
    return children.flatMap((child) => [child, ...flattenChildren(child.children)]);
}

function OutlineInstances() {
    const { selectedEventSphere } = useSelectedEventSphere();
    const { deletableEventSphere } = useDeletableEventSphere();
    const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, deletableWallAsset, selectedFloorAsset, deletableFloorAsset, deletableDecal } = useBuilderStore();

    return (
        <>
            <OutlineInstance
                key="selectedWallAsset"
                selection={selectedWallAsset && flattenChildren(selectedWallAsset.children)}
                color={CONSTANTS.outlineConfig.assetSelectColor}
            />
            <OutlineInstance
                key="selectedFloorAsset"
                selection={selectedFloorAsset && flattenChildren(selectedFloorAsset.children)}
                color={CONSTANTS.outlineConfig.assetSelectColor}
            />
            <OutlineInstance
                key="deletableWallAsset"
                selection={deletableWallAsset && flattenChildren(deletableWallAsset.children)}
                color={CONSTANTS.outlineConfig.assetDeleteColor}
            />
            <OutlineInstance
                key="deletableFloorAsset"
                selection={deletableFloorAsset && flattenChildren(deletableFloorAsset.children)}
                color={CONSTANTS.outlineConfig.assetDeleteColor}
            />

            {/* Aisle / Wall / Floor */}
            <OutlineInstance
                key="selectedAisle"
                selection={selectedAisle?.aisleMesh && flattenChildren(selectedAisle.aisleMesh.children)}
                color={CONSTANTS.outlineConfig.assetSelectColor}
                xRay={false}
            />
            <OutlineInstance
                key="selectedWall"
                selection={selectedWall ? [selectedWall] : null}
                color={CONSTANTS.outlineConfig.assetSelectColor}
            />
            <OutlineInstance
                key="selectedFloor"
                selection={selectedFloor ? [selectedFloor] : null}
                color={CONSTANTS.outlineConfig.assetSelectColor}
            />

            {/* Decals */}
            <OutlineInstance
                key="selectedDecal"
                selection={selectedDecal?.decalMesh ? [selectedDecal.decalMesh] : null}
                color={CONSTANTS.outlineConfig.assetSelectColor}
            />
            <OutlineInstance
                key="deletableDecal"
                selection={deletableDecal ? [deletableDecal] : null}
                color={CONSTANTS.outlineConfig.assetDeleteColor}
                width={3000}
            />

            {/* Event Spheres */}
            <OutlineInstance
                key="selectedEventSphere"
                selection={selectedEventSphere ? [selectedEventSphere] : null}
                color={0x6f42c1}
                edgeStrength={10}
                width={1000}
            />
            <OutlineInstance
                key="deletableEventSphere"
                selection={deletableEventSphere ? [deletableEventSphere] : null}
                color={CONSTANTS.outlineConfig.assetDeleteColor}
                edgeStrength={10}
                width={1000}
            />
        </>
    )
}

export default OutlineInstances;