import { Doodler, Vector } from "@bearmetal/doodler";
import { getContext, getContextItem } from "../lib/context.ts";

export function addButton(props: {
  text: string;
  onClick: () => void;
  style?: {
    color?: string;
    fillColor?: string;
    strokeColor?: string;
    weight?: number;
    noStroke?: boolean;
    noFill?: boolean;
  };
  at: [Vector, Vector];
}) {
  const doodler = getContextItem<Doodler>("doodler");
  const { text, onClick, style } = props;
  const { x, y } = props.at[1].copy().sub(props.at[0]);
  const id = doodler.addUIElement(
    "rectangle",
    props.at[0],
    x,
    y,
    style,
  );
  doodler.registerClickable(props.at[0], props.at[1], onClick);
  return {
    id,
    text,
    onClick,
    style,
  };
}

export function removeButton(id: string, onClick: () => void) {
  getContextItem<Doodler>("doodler").removeUIElement(id);
  getContextItem<Doodler>("doodler").unregisterClickable(onClick);
}