import { Img, Layout, makeScene2D } from "@motion-canvas/2d";
import {
  Direction,
  beginSlide,
  createRef,
  slideTransition,
  all,
} from "@motion-canvas/core";
import {
  CodeBlock,
  edit,
  insert,
  lines,
} from "@motion-canvas/2d/lib/components/CodeBlock";
import amogusSus from "../../public/amogus.png";

const cardBuilder = `const buildCards = (
  people: PersonI[],
  cardGenerator: (person: PersonI) => CardI,
): CardI[] => {
  const cards: CardI[] = [];

  for (const person of people) {
    const card = cardGenerator(person);
    cards.push(card);
  }

  return cards;
};`;

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

  const buildCards = createRef<CodeBlock>();
  const amogus = createRef<Img>();

  view.add(
    <Layout ref={layout} layout direction="row" gap={0}>
      <CodeBlock
        fontSize={25}
        language="typescript"
        ref={buildCards}
        code={cardBuilder}
      />
      <Img ref={amogus} src={amogusSus} opacity={0} width={0} height={0} />
    </Layout>,
  );

  yield* slideTransition(Direction.Right);
  yield* beginSlide("show buildCards");

  yield* buildCards().selection([...lines(6), ...lines(8)], 0.75);
  yield* all(
    amogus().width(300, 0.5),
    amogus().height(400, 0.5),

    amogus().opacity(1, 0.5),
    layout().gap(100, 0.5),
  );

  yield* beginSlide("show side effects");

  yield* all(
    buildCards().edit(1.2)`const buildCards = (
  people: PersonI[],
  cardGenerator: (person: PersonI) => CardI,
): CardI[] => {${insert(`
  if (people.length === 0) {
    return [];
  }
`)}
  const cards: CardI[] = [];

  for (const person of people) {
    const card = cardGenerator(person);
    cards.push(card);
  }

  return cards;
};`,
    amogus().width(0, 0.3),
    amogus().height(0, 0.3),

    layout().gap(0, 0.3),
  );
  yield* beginSlide("base case");

  yield* buildCards().edit(1.2)`const buildCards = (
  people: PersonI[],
  cardGenerator: (person: PersonI) => CardI,
): CardI[] => {
  if (people.length === 0) {
    return [];
  }

  ${edit(
    "const cards: CardI[] = [];",
    `const person = people[0];
  const card = cardGenerator(person);`,
  )}

  for (const person of people) {
    const card = cardGenerator(person);
    cards.push(card);
  }

  return cards;
};`;
  yield* beginSlide("first card");

  yield* buildCards().edit(1.2)`const buildCards = (
  people: PersonI[],
  cardGenerator: (person: PersonI) => CardI,
): CardI[] => {
  if (people.length === 0) {
    return [];
  }

  const person = people[0];
  const card = cardGenerator(person);

  ${edit(
    `for (const person of people) {
    const card = cardGenerator(person);
    cards.push(card);
  }`,
    `const restPeople = people.slice(1);
  const cards = [card].concat(buildCards(restPeople, cardGenerator));`,
  )}

  return cards;
};`;
  yield* beginSlide("recursion");
});