import {
  Graph,
  Grid,
  Plot,
  Marker,
  Vec2,
  PolyLine,
  LabelContainer,
  Text,
  useCoordState,
  useNavigationState,
} from "@coord/graph";


const cubicBezier = (p0: Vec2, p1: Vec2, p2: Vec2, p3: Vec2, t: number) => {
  const u = 1 - t;
  const tt = t * t;
  const uu = u * u;
  const uuu = uu * u;
  const ttt = tt * t;


  const p = p0.scale(uuu);
  const q = p1.scale(3 * uu * t);
  const r = p2.scale(3 * u * tt);
  const s = p3.scale(ttt);


  return p.add(q).add(r).add(s);
};


export default function MyGraph() {
  const [coordBox, setCoordBox] = useNavigationState();
  const [p0, setP0] = useCoordState([-7, 0]);
  const [p1, setP1] = useCoordState([-2, -8]);
  const [p2, setP2] = useCoordState([2, 8]);
  const [p3, setP3] = useCoordState([7, 0]);


  return (
    <>
      <Graph
        height={300}
        width="100%"
        coordBox={coordBox}
        onCoordBoxChange={setCoordBox}
      >
        <Grid />
        <PolyLine
          points={[p0, p1, p2, p3]}
          strokeColor={1}
          strokeDasharray={2}
        />
        <Plot.Parametric
          domain={[0, 1]}
          f={(t) => cubicBezier(p0, p1, p2, p3, t)}
          strokeColor={2}
        />


        <Marker position={p0} onChange={setP0} label={"P0"} />
        <Marker position={p1} onChange={setP1} label={"P1"} />
        <Marker position={p2} onChange={setP2} label={"P2"} />
        <Marker position={p3} onChange={setP3} label={"P3"} />


        <LabelContainer
          size={["90vs", "30vs"]}
          target={p0}
          targetOffset={25}
          strokeWidth={1}
          strokeDasharray={"2"}
        >
          <Text position={["45vs", "15vs"]} fontSize={14}>
            Drag me!
          </Text>
        </LabelContainer>
      </Graph>
    </>
  );
}