import * as THREE from "three";
import { Box, ScreenSizer } from "@react-three/drei";
import * as Constants from "../../../../types/world/worldConstants";

import BoxMaterial from "../../wrappers/materials/boxMaterial";

function ReferencePoint({ point }: { readonly point: Point }) {
    const boxScale: [number, number, number] = Constants.pointConfig.screenSpaceBoxScale;
    const colors = {
        defaultInnerColor: Constants.pointConfig.defaultInnerColor,
        defaultOuterColor: Constants.pointConfig.helperColor,
        defaultDeleteColor: Constants.pointConfig.deleteColor,
    };

    if (!point) {
        return null;
    }

    let pointName = "Point";
    if (point.pointType === "Wall") {
        pointName = "Wall-Point";
    } else if (point.pointType === "Floor") {
        pointName = "Floor-Point";
    } else if (point.pointType === "Aisle") {
        pointName = "Aisle-Point";
    } else if (point.pointType === "Zone") {
        pointName = "Zone-Point";
    }

    if (!point) return null;

    return (
        <ScreenSizer scale={1} position={new THREE.Vector3(...point.position)} name={pointName} uuid={point.pointUuid} userData={point}>
            <Box args={boxScale}>
                <BoxMaterial variant="box1" uOuterColor={colors.defaultOuterColor} uInnerColor={colors.defaultInnerColor} />
            </Box>
        </ScreenSizer>
    );
}

export default ReferencePoint;