embedContext.tsx

"use client";

import { ReplCommand, ReplOutput } from "@my-code/runtime/interface";
import { usePathname } from "next/navigation";
import {
  createContext,
  ReactNode,
  useCallback,
  useContext,
  useState,
} from "react";

/*
ファイルの内容や埋め込みターミナルのログを1箇所でまとめて管理し、書き込み・読み込みできるようにする

ファイルはページのURLごとに独立して管理し、常にすべて保持している。
ターミナルのログもページごとに独立だが、ページが切り替わるたびに消す。
*/

// 全部stringだけどわかりやすくするために名前をつけている
type PagePathname = string;
type Filename = string;
type TerminalId = string;

interface IEmbedContext {
  files: Readonly<Record<Filename, string>>;
  // ファイルを書き込む。更新後のページ内の全ファイル内容を返す
  // 返り値を使うことで再レンダリングを待たずに最新の内容を取得できる
  writeFile: (
    updatedFiles: Readonly<Record<Filename, string>>
  ) => Promise<Readonly<Record<Filename, string>>>;

  replOutputs: Readonly<Record<TerminalId, ReplCommand[]>>;
  addReplCommand: (terminalId: TerminalId, command: string) => string;
  addReplOutput: (
    terminalId: TerminalId,
    commandId: string,
    output: ReplOutput
  ) => void;

  execResults: Readonly<Record<Filename, ReplOutput[]>>;
  clearExecResult: (filename: Filename) => void;
  addExecOutput: (filename: Filename, output: ReplOutput) => void;
}
const EmbedContext = createContext<IEmbedContext>(null!);

export function useEmbedContext() {
  const context = useContext(EmbedContext);
  if (!context) {
    throw new Error(
      "useEmbedContext must be used within a EmbedContextProvider"
    );
  }
  return context;
}

export function EmbedContextProvider({ children }: { children: ReactNode }) {
  const pathname = usePathname();

  const [prevPathname, setPrevPathname] = useState<PagePathname>("");
  const [files, setFiles] = useState<
    Record<PagePathname, Record<Filename, string>>
  >({});
  const [replOutputs, setReplOutputs] = useState<
    Record<TerminalId, ReplCommand[]>
  >({});
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [commandIdCounters, setCommandIdCounters] = useState<
    Record<TerminalId, number>
  >({});
  const [execResults, setExecResults] = useState<
    Record<Filename, ReplOutput[]>
  >({});
  if (pathname && pathname !== prevPathname) {
    setPrevPathname(pathname);
    setReplOutputs({});
    setCommandIdCounters({});
    setExecResults({});
  }

  const writeFile = useCallback(
    (updatedFiles: Record<Filename, string>) => {
      return new Promise<Record<Filename, string>>((resolve) => {
        setFiles((files) => {
          let changed = false;
          const newFiles = { ...files };
          newFiles[pathname] = { ...(newFiles[pathname] ?? {}) };
          for (const [name, content] of Object.entries(updatedFiles)) {
            if (newFiles[pathname][name] !== content) {
              changed = true;
              newFiles[pathname][name] = content;
            }
          }
          if (changed) {
            resolve(newFiles[pathname]);
            return newFiles;
          } else {
            resolve(files[pathname] || {});
            return files;
          }
        });
      });
    },
    [pathname]
  );
  const addReplCommand = useCallback(
    (terminalId: TerminalId, command: string): string => {
      let commandId = "";
      setCommandIdCounters((counters) => {
        const newCounters = { ...counters };
        const currentCount = newCounters[terminalId] ?? 0;
        commandId = String(currentCount);
        newCounters[terminalId] = currentCount + 1;
        return newCounters;
      });
      setReplOutputs((outs) => {
        outs = { ...outs };
        if (!(terminalId in outs)) {
          outs[terminalId] = [];
        }
        outs[terminalId] = [
          ...outs[terminalId],
          { command: command, output: [], commandId },
        ];
        return outs;
      });
      return commandId;
    },
    []
  );
  const addReplOutput = useCallback(
    (terminalId: TerminalId, commandId: string, output: ReplOutput) =>
      setReplOutputs((outs) => {
        outs = { ...outs };
        if (terminalId in outs) {
          outs[terminalId] = [...outs[terminalId]];
          // Find the command by commandId
          const commandIndex = outs[terminalId].findIndex(
            (cmd) => cmd.commandId === commandId
          );
          if (commandIndex >= 0) {
            const command = outs[terminalId][commandIndex];
            outs[terminalId][commandIndex] = {
              ...command,
              output: [...command.output, output],
            };
          }
        }
        return outs;
      }),
    []
  );
  const clearExecResult = useCallback(
    (filename: Filename) =>
      setExecResults((results) => {
        results = { ...results };
        results[filename] = [];
        return results;
      }),
    []
  );
  const addExecOutput = useCallback(
    (filename: Filename, output: ReplOutput) =>
      setExecResults((results) => {
        results = { ...results };
        if (!(filename in results)) {
          results[filename] = [];
        }
        results[filename] = [...results[filename], output];
        return results;
      }),
    []
  );

  return (
    <EmbedContext.Provider
      value={{
        files: files[pathname] || {},
        writeFile,
        replOutputs,
        addReplCommand,
        addReplOutput,
        execResults,
        clearExecResult,
        addExecOutput,
      }}
    >
      {children}
    </EmbedContext.Provider>
  );
}