import { Layout, makeScene2D } from "@motion-canvas/2d";
import {
  Direction,
  beginSlide,
  createRef,
  slideTransition,
} from "@motion-canvas/core";
import { LambdaReducer } from "../components/lambda_reducer";
import { baseDefinitions } from "../utils/lambdas";

export default makeScene2D(function* (view) {
  const lambdaReducer = createRef<LambdaReducer>();
  const layout = createRef<Layout>();

  view.add(
    <Layout
      layout
      ref={layout}
      direction="column"
      alignItems="center"
      gap={50}
    ></Layout>
  );
  yield* slideTransition(Direction.Right);
  yield* beginSlide("Boolean Reductions");

  for (const term of [
    "((false one) zero)",
    "((true one) zero)",
    "(((if true) one) zero)",
  ]) {
    yield* layout().opacity(0, 0.5);
    layout().add(
      <LambdaReducer
        ref={lambdaReducer}
        lambdaTerm={term}
        definitions={baseDefinitions}
      ></LambdaReducer>
    );
    yield* layout().opacity(1, 0.5);

    yield* beginSlide("Next Reduction " + term);
    for (let i = 0; !lambdaReducer().isDone(); i++) {
      yield* lambdaReducer().step(0.5);
      yield* beginSlide(term + " Next Step " + i);
    }
    layout().removeChildren();
  }
});