import { makeScene2D } from "@motion-canvas/2d";
import {
  Direction,
  beginSlide,
  createRef,
  slideTransition,
} from "@motion-canvas/core";

import { FunctionBox } from "../components/function_box";

const add = `(a: number, b: number) => {
  return a + b;
}`;

export default makeScene2D(function* (view) {
  const functionBox = createRef<FunctionBox>();

  view.add(<FunctionBox arity={2} source={add} ref={functionBox} />);

  yield* slideTransition(Direction.Left);

  yield* beginSlide("Black Box");

  for (const [[a, b], i] of [
    [1, 2],
    [3, 4],
    [1, 2],
    [1, 2],
  ].map((x, i) => [x, i]) as [[number, number], number][]) {
    const inputId = "(" + [a, b, i].join(",") + ")";

    yield* functionBox().reset(0.5);
    yield* functionBox().setInputs([{ val: a }, { val: b }], 0.5);

    yield* beginSlide("Add Inputs " + inputId);

    yield* functionBox().propogateInput(0.5);
    yield* beginSlide("Propogate Inputs " + inputId);

    yield* functionBox().propogateOutput(0.5);
    yield* beginSlide("Propogate Outputs of " + inputId);
  }

  yield* functionBox().reset(0.5);

  yield* functionBox().showCode(0.85);
  yield* beginSlide("Show Code");

  yield* functionBox().hideCode(0.85);
  yield* beginSlide("Hide Code");
});