import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
import {
  beginSlide,
  createRef,
  waitFor,
  all,
  fadeTransition,
} from "@motion-canvas/core";

import me from "../../public/img/me.jpg";
import { theme } from "../theme";

export default makeScene2D(function* (view) {
  const img = createRef<Img>();
  const node = createRef<Node>();
  const layout = createRef<Layout>();
  const src = createRef<Txt>();

  view.add(
    <>
      <Layout
        layout
        ref={layout}
        direction="column"
        justifyContent="center"
        gap={12}
        alignItems="start"
        y={-10}
      >
        <Node ref={node} opacity={0}>
          <Txt fontFamily={theme.font} fill={theme.text.hex}>
            Hello!
          </Txt>
          <Txt fontFamily={theme.font} fill={theme.text.hex}>
            My name is Elizabeth{" "}
            <Txt fontFamily={theme.font} fill={theme.teal.hex}>
              (@simponic)
            </Txt>
            .
          </Txt>
          <Txt fontFamily={theme.font} fill={theme.text.hex}>
            {"=>"} I {"<3"} Functional Programming λ.
          </Txt>
          <Txt fontFamily={theme.font} fill={theme.text.hex}>
            {"=>"} I've been a student networking{"\n"}software engineer here at
            USU
            {"\n"}
            for over 1.5 years.
          </Txt>
          <Txt fontFamily={theme.font} fill={theme.text.hex}>
            {"=>"} I'm an SDE at AWS starting{"\n"}soon in Seattle.
          </Txt>
        </Node>
      </Layout>
      <Img y={-10} ref={img} src={me} width={10} alpha={0} radius={20} />{" "}
      <Txt opacity={0} ref={src} fontFamily={theme.font} fill={theme.green.hex}>
        git.simponic.xyz/simponic/compiling-the-lambda-calculus
      </Txt>
    </>,
  );

  yield img().fill(img().getColorAtPoint(0));

  const diff = 380;
  yield* all(
    img().size([450, 450], 1),
    img().radius(50, 1),
    img().alpha(1, 1),
    img().position.x(-diff, 1),
    node().opacity(1, 1),
    layout().position.x(diff, 1),
    src().opacity(1, 1),
    src().position.y(290, 1),
  );

  yield* beginSlide("About Me");
});