import { Layout, Node, NodeProps, SVG, Txt } from "@motion-canvas/2d";
import { theme } from "../theme";
import { all, createRef, waitFor } from "@motion-canvas/core";

export const PEOPLE: PersonI[] = [
  {
    name: "Alan Turing",
    birthday: new Date("06/23/1912"),
    color: theme.green.hex,
  },
  {
    name: "Grace Hopper",
    birthday: new Date("12/09/1906"),
    color: theme.flamingo.hex,
  },
  {
    name: "Edsger Dijkstra",
    birthday: new Date("07/11/1930"),
    color: theme.red.hex,
  },
  {
    name: "Alonzo Church",
    birthday: new Date("06/14/1912"),
    color: theme.sapphire.hex,
  },
  {
    name: "Margaret Hamilton",
    birthday: new Date("12/09/1902"),
    color: theme.yellow.hex,
  },
];

const profileSrc = (color: string) => `
<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 72 72" id="emoji" xmlns="http://www.w3.org/2000/svg">
  <g id="color">
<path fill="${color}" stroke="none" d="M58,61c0,0,0-3-1-7c-1.2109-4.8457-4-8-10-8c-5,0-15,0-22,0c-6,0-8.7891,3.1543-10,8c-1,4-1,7-1,7H58z"/>
<path fill="${color}" stroke="none" d="M26,26c0,3.7246,0.5391,7.8086,2,10c1.8613,2.793,5.0176,4,8,4c3.0957,0,6.1367-1.207,8-4 c1.46-2.1914,2-6.2754,2-10c0-2.7935-1-12-10-12S26,21.3442,26,26z"/>
  </g>
  <g id="line">
    <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M58,60c0,0,0-2-1-6 c-1.2109-4.8457-4-8-10-8c-5,0-15,0-22,0c-6,0-8.7891,3.1543-10,8c-1,4-1,6-1,6"/>
    <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="2" d="M26,26c0,3.7246,0.5391,7.8086,2,10 c1.8613,2.793,5.0176,4,8,4c3.0957,0,6.1367-1.207,8-4c1.46-2.1914,2-6.2754,2-10c0-2.7935-1-12-10-12S26,21.3442,26,26z"/>
  </g>
</svg>`;

export interface PersonI {
  name: string;
  birthday: Date;
  color: string;
}

export interface PersonProps extends NodeProps {
  person: PersonI;

  width?: number;
  height?: number;
}

export class Person extends Node {
  private readonly svg = createRef<SVG>();

  public constructor(props?: PersonProps) {
    super({ ...props });

    this.add(
      <Layout direction="column" alignItems="center" layout>
        <SVG
          ref={this.svg}
          svg={profileSrc(props.person.color)}
          fill="green"
          width={props.width ?? 150}
          height={props.height ?? 150}
        ></SVG>
        <Txt fontSize={20} fontFamily={theme.font} fill={theme.text.hex}>
          {props.person.name}
        </Txt>
      </Layout>,
    );
  }

  public *emit(text: string, duration: number, cleanUp = true) {
    const ref = createRef<Txt>();

    this.insert(
      <Txt
        position={this.svg().bottomRight()}
        ref={ref}
        fontSize={0}
        opacity={0}
        fontFamily={theme.font}
        fill={theme.text.hex}
      >
        {text}
      </Txt>,
      0,
    );

    yield* all(ref().fontSize(40, duration), ref().opacity(1, duration));
    if (cleanUp) {
      yield* waitFor(duration);
      yield* all(ref().fontSize(0, duration), ref().opacity(0, duration));
      yield ref().remove();
    }
  }
}