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

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

import { usePointEventHandler } from "./eventHandler/usePointEventHandler";

function Point({ point }: { readonly point: Point }) {
    const boxScale: [number, number, number] = Constants.pointConfig.screenSpaceBoxScale;
    const colors = getColor(point);

    function getColor(point: Point) {
        if (point.pointType === "Aisle") {
            return {
                defaultInnerColor: Constants.pointConfig.defaultInnerColor,
                defaultOuterColor: Constants.pointConfig.aisleOuterColor,
                defaultDeleteColor: Constants.pointConfig.deleteColor,
            };
        } else if (point.pointType === "Floor") {
            return {
                defaultInnerColor: Constants.pointConfig.defaultInnerColor,
                defaultOuterColor: Constants.pointConfig.floorOuterColor,
                defaultDeleteColor: Constants.pointConfig.deleteColor,
            };
        } else if (point.pointType === "Wall") {
            return {
                defaultInnerColor: Constants.pointConfig.defaultInnerColor,
                defaultOuterColor: Constants.pointConfig.wallOuterColor,
                defaultDeleteColor: Constants.pointConfig.deleteColor,
            };
        } else if (point.pointType === "Zone") {
            return {
                defaultInnerColor: Constants.pointConfig.defaultInnerColor,
                defaultOuterColor: Constants.pointConfig.zoneOuterColor,
                defaultDeleteColor: Constants.pointConfig.deleteColor,
            };
        } else {
            return {
                defaultInnerColor: Constants.pointConfig.defaultInnerColor,
                defaultOuterColor: Constants.pointConfig.defaultOuterColor,
                defaultDeleteColor: Constants.pointConfig.deleteColor,
            };
        }
    }

    const { isHovered, isSelected, isDeleteHovered, handleDrag, handleDragStart, handleDragEnd, handlePointClick, handlePointerOver, handlePointerOut } = usePointEventHandler({ point });

    return (
        <>
            {!isSelected ? (
                <DragControls axisLock="y" autoTransform={false} onDragStart={handleDragStart} onDrag={handleDrag} onDragEnd={handleDragEnd}>
                    <ScreenSizer
                        key={point.pointUuid}
                        uuid={point.pointUuid}
                        name={`${point.pointType}-Point`}
                        scale={1}
                        position={[...point.position]}
                        onClick={handlePointClick}
                        onPointerOver={handlePointerOver}
                        onPointerOut={handlePointerOut}
                        userData={point}
                    >
                        <Box args={boxScale} uuid={point.pointUuid} name={`${point.pointType}-Point`} userData={point}>
                            <BoxMaterial
                                variant="box1"
                                uOuterColor={colors.defaultOuterColor}
                                uInnerColor={colors.defaultInnerColor}
                                uDeleteColor={colors.defaultDeleteColor}
                                isHovered={isHovered}
                                isDeleteHovered={isDeleteHovered}
                            />
                        </Box>
                    </ScreenSizer>
                </DragControls>
            ) : (
                <group
                    key={point.pointUuid}
                    uuid={point.pointUuid}
                    name={`${point.pointType}-Point`}
                    position={[point.position[0], 0.3, point.position[2]]}
                    userData={point}
                    rotation={[Math.PI / 2, 0, 0]}
                >
                    <mesh>
                        <torusGeometry args={[0.4, 0.1, 2, 16]} />
                        <meshBasicMaterial color="#6F42C1" />
                    </mesh>

                    <mesh position={[0, 0, 0]}>
                        <sphereGeometry args={[0.3, 8, 16]} />
                        <meshBasicMaterial color="white" />
                    </mesh>
                </group>
            )}
        </>
    );
}

export default Point;
