import React, { useEffect } from "react";
import Layout from "@/components/layout/Layout";
import { UrdfSelectionModalContainer } from "@/components/UrdfSelectionModalContainer";
import { useUrdf } from "@/hooks/useUrdf";

// 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="flex flex-col h-screen bg-netflix-background text-white overflow-hidden">
      {/* Layout taking full height */}
      <div className="w-full h-full">
        <Layout />
      </div>

      {/* Selection Modal Container - positioned at root level to avoid nesting issues */}
      <UrdfSelectionModalContainer />
    </div>
  );
};

export default UrdfView;