class HandTerm extends React.Component<IHandTermProps, IHandTermState> {

import { Buffer } from 'buffer';
window.Buffer = Buffer;

// Define 'global' if it's undefined (for browser environments)
if (typeof global === 'undefined') {
 window.global = window;
}
(async () => {
 const ReactDOM = await import('react-dom/client');
 const App = await import('./App');

 ReactDOM.createRoot(document.getElementById('root')!).render(
  <App.default />
 );
})();

// App.tsx
import React, { useEffect, useRef } from 'react';
import HandTerm from './components/HandTerm';
import { CommandProvider } from './commands/CommandProvider';
import { TerminalCssClasses } from './types/TerminalTypes';
import { useAuth } from './lib/useAuth';

const App = () => {
 const containerRef = React.createRef<HTMLDivElement>();
 const [containerWidth, setContainerWidth] = React.useState<number>(0);
 const handexTermRef = useRef<HandTerm>(null);

 useEffect(() => {
  const w = getContainerWidth();
  setContainerWidth(w);

  const handleClickOutsideTerminal = (event: UIEvent) => {
   // Check if the click is outside of the terminal area
   if (
    handexTermRef.current &&
    handexTermRef.current.adapterRef.current
    && (event.target as HTMLElement).id !== TerminalCssClasses.Terminal
   ) {
    event.stopPropagation();
    window.scrollTo(0, window.screen.height)
    handexTermRef.current.adapterRef.current.focusTerminal();

    if (event instanceof MouseEvent || (event instanceof TouchEvent && event.touches.length === 1)) {
     handexTermRef.current.adapterRef.current.focusTerminal();

     setTimeout(() => {
      if (
       handexTermRef.current &&
       handexTermRef.current.adapterRef.current
      ) {
       handexTermRef.current.adapterRef.current.focusTerminal();
      }
     }, 1000);
     // type a character to trigger the focus event
     // handexTermRef.current.adapterRef.current.terminalWrite('a');
    }
   }
  };

  // Attach the event listener to the document body
  document.body.addEventListener('click', handleClickOutsideTerminal);
  document.body.addEventListener('touchstart', handleClickOutsideTerminal);

  // Clean up the event listener
  return () => {
   document.body.removeEventListener('click', handleClickOutsideTerminal);
  };
 }, [])

 const getContainerWidth = () => {
  return containerRef.current?.clientWidth ?? 0
 }

 useEffect(() => {
  const handleResize = () => {
   const w = getContainerWidth();
   setContainerWidth(w);
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
 })

 return (
  <CommandProvider handTermRef={handexTermRef}>
   <div ref={containerRef}>
    <HandTerm
     ref={handexTermRef}
     auth={useAuth()}
     terminalWidth={containerWidth}
    />
   </div>
  </CommandProvider>
 );
};

export default App;

// src/commands/CommandProvider.tsx
import React, { useCallback, useMemo, useState } from 'react';
import { CommandContext, ICommandContext } from './CommandContext';
import { commandRegistry } from './commandRegistry';
import HandTerm from '../components/HandTerm';

interface CommandProviderProps {
 children?: React.ReactNode;
 handTermRef: React.RefObject<HandTerm>;
}

export const CommandProvider: React.FC<CommandProviderProps> = (props: CommandProviderProps) => {

 const [commandHistory ] = useState<string[]>([]);
  

 const executeCommand = useCallback((commandName: string, args?: string[], switches?: Record<string, boolean | string>) => {
  const handTerm = props.handTermRef.current;
  if (!handTerm) {
   console.error('CommandProvider: handTermRef.current is NULL');
   return {status: 404, message: 'CommandProvider: handTermRef.current is NULL'};
  }
  const command = commandRegistry.getCommand(commandName);
  if (command) {
   // Execute the command and return the result
   return {status: 200, message: command.execute(commandName, args, switches, handTerm).message };
  }
  return { status: 404, message: `CommandProvider: Command not found: ${commandName}`};
 }, []);

 const appendToOutput = useCallback((element: React.ReactNode) => {
  const handTerm = props.handTermRef.current;
  if (!handTerm) {
   console.error('CommandProvider: handTermRef.current is NULL');
   return 'CommandProvider: handTermRef.current is NULL';
  }
  if(element) handTerm.writeOutput(element.toString());
 }, []);

 const clearOuput = useCallback(() => {
  const handTerm = props.handTermRef.current;
  if (!handTerm) {
   console.error('CommandProvider: handTermRef.current is NULL');
   return 'CommandProvider: handTermRef.current is NULL';
  }
  handTerm.clearCommandHistory("clear");
 }, []);

 // Provide the context with the necessary values
 const contextValue = useMemo<ICommandContext>(() => ({
  commandHistory,
  executeCommand,
  appendToOutput: appendToOutput,
  clearOuput: clearOuput
 }), [commandHistory, executeCommand]);

 return (
  <CommandContext.Provider value={contextValue}>
   {props.children}
  </CommandContext.Provider>
 );
};

 public handleCommand = (cmd: string) => {
  this.setState(
   // Update the command history
   prevState => ({
    commandHistory: [cmd, ...prevState.commandHistory],
    currentCommandIndex: -1,
   }),
   () => this.saveCommandHistory(this.state.commandHistory)
  );
  // TODO: handle achievement unlocks
  if (this.state.isInTutorial) {
   // Unlock the next achievement and decide if we are still in tutorial mode
   if (cmd === '') cmd = 'Return (ENTER)';
   if (this.state.nextAchievement?.phrase.join('') === cmd
   ) {
    this.unlockAchievement(cmd);
   }
  }
  const { command, args, switches } = this.parseCommand(cmd);
  if (this.context) {
   const output = this.context
    .executeCommand(
     command,
     args,
     switches,
    );
   if (output.status === 200) return;
  }

// main.tsx or App.tsx
import './commands'; // Adjust the path as necessary to point to src/commands/index.ts