import { Terminal } from '@xterm/xterm';
// import { FitAddon } from 'xterm-addon-fit';
import '@xterm/xterm/css/xterm.css';
import io from 'socket.io-client';
const term = new Terminal();
term.open(document.getElementById('terminal') as HTMLElement);
// term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
let input = '';
term.onData((data) => {
  // socket.emit('input', { name: 'tab', data });
  if (data === '\b' || data === '\x7F') {
    console.log('blank data\b');
    input = input.slice(0, -1);
    term.write('\b \b');
    return;
  }
  input += data;
  if (data === '\r') {
    console.log('input', input);
    socket.emit('tab-input', input);
    input = '';
  } 
  term.write(data);
});
// term.on
term.onResize(({ cols, rows }) => {
  term.resize(cols, rows);
});

const socket = io(window.location.origin + '/terminal', { path: '/terminal', reconnection: true });
socket.connect();
const termialTab0 = { name: 'tab', children: [] };
const createTerminal = (tab: any) => {
  const name = tab.name;
  const cwd = null;
  socket.emit('create', { name: name });
};
socket.on('connect', () => {
  console.log('connect');
  createTerminal(termialTab0);
});
socket.on('message', (data: any) => {
  console.log('message', data);
});

socket.on('tab-output', (data: any) => {
  console.log('tab-output', data);
  term.write(data);
});
socket.on('tab-pid', (data: any) => {
  console.log('tab-pid-data', data);
});

const inputEl = document.querySelector('#input') as HTMLInputElement;
const send = document.querySelector('#send');

send?.addEventListener('click', () => {
  const data = inputEl?.value;
  socket.emit('tab-input', data);
});