"@jupyterlab/services": "7.2.2",
"@jupyterlab/terminal": "4.2.2",

import { useEffect, useRef } from 'react'
import { Terminal as XTerminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { TerminalManager,  ServerConnection } from '@jupyterlab/services'
import 'xterm/css/xterm.css'
import styles from './style.less'
import { WebLinksAddon } from '@xterm/addon-web-links';

function Index() {
  const ref = useRef()
  // const serverSettings = ServerConnection.makeSettings();
  // console.log('serverSettings: ', serverSettings);
  useEffect(async () => {
    const term = new XTerminal({
      cursorBlink: true, 
      allowTransparency: false,
      rendererType: 'canvas', 
      convertEol: true,
      scrollback: 800, 
      row: 70,
      theme: {
        foreground: 'white',
        background: '#181E29'
      },
    })
    term.loadAddon(new WebLinksAddon());
    const fitAddon = new FitAddon()
    term.loadAddon(fitAddon)
    term.open(ref.current)
    fitAddon.fit()
    term.focus()
    const terminalManager = new TerminalManager({
      serverSettings: {
        baseUrl: 'http://localhost:8888',
        wsUrl: '/terminals/websocket',
        token: 'bdea148105459385ee20889c2c820066d345b23a1f3a80c2',
      },
    });

    console.log('terminalManager: ', terminalManager);

    terminalManager.ready.then(() => {
      console.log('TerminalManager is ready and connected to the Jupyter server.');
    }).catch(reason => {
      console.error('Failed to connect to the Jupyter server:', reason);
    });
    // try {
    //   console.log('terminalManager.isReady: ', terminalManager.isReady);
    //   await terminalManager.ready;
    //   console.log('TerminalManager ready');

    //   if (terminalManager.isAvailable()) {
    //     const session = await terminalManager.startNew();
    //     console.log('session: ', session);
    //   } else {
    //     console.log('terminalManager.isReady2: ', terminalManager.isReady);
    //     console.error('Terminal service is not available.');
    //   }
    // } catch (error) {
    //   console.error('Error initializing TerminalManager:', error);
    // }

  }, [])

  return <div ref={ref} className={styles.index}></div>
}

export default Index