import { useMemo } from 'react';
import layout1 from '../../../assets/gltf-glb/layouts/floorplane_1.glb';
import layout2 from '../../../assets/gltf-glb/layouts/floorplane_2.glb';
import useLayoutStore from '../../../store/builder/uselayoutStore';
import { useGLTF } from '@react-three/drei';
import { useToggleView } from '../../../store/builder/store';

const modelPaths: Record<string, string> = {
    'layout1': layout1,
    'layout2': layout2
};

function LayoutModel() {
  const { toggleView } = useToggleView();
  const { currentLayout } = useLayoutStore();

  // Always call the hook, but ensure it has a valid fallback
  const path = currentLayout ? modelPaths[currentLayout] : modelPaths.layout1;

  // Explicitly cast the return type to ensure it's not an array
  const gltf = useGLTF(path) as any;

  const cloned = useMemo(() => gltf.scene.clone(), [gltf]);

  if (!currentLayout || !toggleView) return null;

  return (
    <group position={[0, 0, 0]} dispose={null}>
      <primitive object={cloned} />
    </group>
  );
}

export default LayoutModel;
