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

const PROS = [
  "readbility, reasoning",
  "concurrency",
  "no side effects",
  "computers and math!",
];

const CONS = ["more computation", "higher learning curve"];

export default makeScene2D(function* (view) {
  const pros = createRef<Txt>();
  const cons = createRef<Txt>();

  view.add(
    <Layout direction="row" justifyContent="center" gap={300} layout>
      <Layout direction="column" justifyContent="end">
        <Txt fontSize={30} fontFamily={theme.font} fill={theme.green.hex}>
          PROS :)
        </Txt>
        <Txt
          ref={pros}
          fontSize={30}
          fontFamily={theme.font}
          fill={theme.text.hex}
        ></Txt>
      </Layout>
      <Layout direction="column" justifyContent="start">
        <Txt fontSize={30} fontFamily={theme.font} fill={theme.red.hex}>
          CONS :(
        </Txt>
        <Txt
          ref={cons}
          fontSize={30}
          fontFamily={theme.font}
          fill={theme.text.hex}
        ></Txt>
      </Layout>
    </Layout>,
  );
  yield* slideTransition(Direction.Right);
  yield* beginSlide("layout pros and cons");

  for (const pro of PROS) {
    yield* pros().text(pros().text() + "\n\n+ " + pro, 0.5);
    yield* beginSlide("pro - " + pro);
  }

  for (const con of CONS) {
    yield* cons().text(cons().text() + "\n\n- " + con, 0.5);
    yield* beginSlide("con - " + con);
  }
});