import React, { useEffect } from "react";
import { UrdfSelectionModalContainer } from "@/components/UrdfSelectionModalContainer";
import { useUrdf } from "@/hooks/useUrdf";
import URDFViewer from "@/components/UrdfViewer";
// This is needed to make TypeScript recognize webkitdirectory as a valid attribute
declare module "react" {
  interface InputHTMLAttributes<T> extends React.HTMLAttributes<T> {
    directory?: string;
    webkitdirectory?: string;
  }
}

const UrdfView: React.FC = () => {
  // Get the setIsDefaultModel function from the useUrdf hook
  const { setIsDefaultModel } = useUrdf();
  // Set isDefaultModel to true when the component mounts
  useEffect(() => {
    setIsDefaultModel(true);
    console.log("🤖 Playground opened: Setting default model to true");
  }, [setIsDefaultModel]);

  return (
    <div className="relative w-full h-full overflow-hidden">
      {/* Main content that fills the container */}
      <UrdfSelectionModalContainer />
      <div className="w-full h-full">
        <URDFViewer />
      </div>
    </div>
  );
};

export default UrdfView;