import { InputSection } from "@elvis/ui";

import { formatNumber } from "./formula";
import MathText from "./MathText";
import type { Graph, Mode } from "./types";
import type { RunResults } from "./useRunResults";

const mathClass = "font-mono text-sm break-words";

const shown = (value: number | undefined) => (value === undefined ? "—" : formatNumber(value));

// A space for the function's value and each derivative, filled in as runs find them
export default function RunResult({ graph, results, mode }: { graph: Graph; results: RunResults; mode: Mode }) {
  const missing = graph.inputs.some((name) => !(name in results.derivatives));
  return (
    <InputSection label="Result">
      <div data-results className="flex flex-col gap-1">
        <p className={mathClass}>f = {shown(results.f)}</p>
        {graph.inputs.map((name) => (
          <p key={name} className={mathClass}>
            <MathText text={`∂f/∂${name} = ${shown(results.derivatives[name])}`} />
          </p>
        ))}
        {mode === "forward" && results.f !== undefined && missing && (
          <p className="text-sm text-ink-muted">This pass gives one derivative. Choose another input for the others.</p>
        )}
      </div>
    </InputSection>
  );
}