import { useEffect, useMemo, useRef } from "react";
import { Terminal } from "@xterm/xterm";
import { SearchAddon } from "@xterm/addon-search";
import "@xterm/xterm/css/xterm.css";

function App() {
  const terminalRef = useRef<HTMLDivElement>(null);
  const xterm = useMemo(() => new Terminal({ allowProposedApi: true }), []);
  const searchAddon = useMemo(() => new SearchAddon(), []);

  useEffect(() => {
    if (terminalRef.current && !xterm.element) {
      xterm.loadAddon(searchAddon);
      xterm.open(terminalRef.current);

      for (let i = 0; i < 5; i++) {
        xterm.writeln(
          "1. hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello"
        );
      }
    }
  }, [xterm, searchAddon]);

  useEffect(() => {
    if (xterm.element) {
      searchAddon.findNext("hello", {
        caseSensitive: false,
        wholeWord: false,
        decorations: {
          matchBackground: "#ffff00",
          matchBorder: "#ffff00",
          matchOverviewRuler: "#ffff00",
          activeMatchBackground: "#ffff00",
          activeMatchBorder: "#ffff00",
          activeMatchColorOverviewRuler: "#ffff00",
        },
        incremental: false,
      });
    }
  }, [searchAddon, xterm.element]);

  return <div ref={terminalRef} />;
}

export default App;