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}>
      <LambdaReducer
        ref={lambdaReducer}
        lambdaTerm={"(succ zero)"}
        definitions={baseDefinitions}
      ></LambdaReducer>
    </Layout>
  );

  yield* slideTransition(Direction.Right);
  yield* beginSlide("Example Reductions");

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

  const one = lambdaReducer().getCode();
  const reduceToTwo = createRef<LambdaReducer>();
  layout().add(
    <LambdaReducer
      ref={reduceToTwo}
      lambdaTerm={`(succ ${one})`}
      definitions={baseDefinitions}
    ></LambdaReducer>
  );

  for (let i = 0; !reduceToTwo().isDone(); i++) {
    yield* reduceToTwo().step(0.5);
    yield* beginSlide("2 Next Step " + i);
  }
});