// A way to update the transform properties on the canvas without causing a shit ton of rerenders
import { ID } from "../../../shared/types";

type MouseStyle = {
  top: number;
  left: number;
};

type MouseStyleInput = {
  top?: number;
  left?: number;
};

export const mouseStyleDictionary: {
  [mouseId: string]: MouseStyle;
} = {};

export function setStyle(id: ID, style: MouseStyleInput) {
  mouseStyleDictionary[id] = {
    ...mouseStyleDictionary[id],
    ...style,
  };
  computeStyle();
}

function computeStyle() {
  const computedStyle = Object.keys(mouseStyleDictionary).reduce(
    (accumulator, mouseId) => {
      const mouseStyle = mouseStyleDictionary[mouseId];
      const thisStyle = `.mouse-${mouseId}{
        transform: translate(${mouseStyle.left - 4.5}px, ${
        mouseStyle.top + 19.125
      }px);
        transition: .5s ease-in-out;
      }`;

      return accumulator + thisStyle;
    },
    ""
  );

  mouseEl.innerHTML = computedStyle;
}

const mouseEl = document.createElement("style");
mouseEl.type = "text/css";

const head = document.querySelector("head")!;
head.appendChild(mouseEl);