import React from 'react';
import { PartLabel } from './primitives';
import type {
  MachinePartDefinition,
  ProceduralMachineSceneProps,
} from './types';

export function getPartVisualProps(
  partId: string,
  props: ProceduralMachineSceneProps,
): {
  selected: boolean;
  highlighted: boolean;
  visible: boolean;
  opacity: number;
  wireframe: boolean;
} {
  return {
    selected: props.selectedPartId === partId,
    highlighted:
      props.hoveredPartId === partId || Boolean(props.highlightedPartIds?.includes(partId)),
    visible: props.partState?.[partId]?.visible !== false,
    opacity: props.partState?.[partId]?.opacity ?? 1,
    wireframe: Boolean(props.wireframe),
  };
}

export function PartLabels({
  parts,
  visible,
}: {
  parts: MachinePartDefinition[];
  visible?: boolean;
}): JSX.Element | null {
  if (!visible) return null;

  return (
    <>
      {parts
        .filter((part) => part.labelPosition)
        .map((part) => (
          <PartLabel key={part.id} text={part.name} position={part.labelPosition!} />
        ))}
    </>
  );
}

export function EngineeringBaseplate({
  width = 5,
  depth = 3,
}: {
  width?: number;
  depth?: number;
}): JSX.Element {
  return (
    <group position={[0, -1.65, 0]}>
      <mesh receiveShadow>
        <boxGeometry args={[width, 0.04, depth]} />
        <meshStandardMaterial color="#111722" metalness={0.15} roughness={0.68} />
      </mesh>
      <mesh position={[0, 0.025, 0]}>
        <boxGeometry args={[width + 0.02, 0.012, depth + 0.02]} />
        <meshBasicMaterial color="#4c8dff" transparent opacity={0.08} />
      </mesh>
    </group>
  );
}