import { ref, onMounted } from "vue";
interface Ref {
  value: string;
}
export default function useMessageItemAnims({ mr, tr }: { mr: Ref; tr: Ref }) {
  const signatureTranslate = ref("");
  let messageRect: string | SVGRectElement | SVGSVGElement | any;
  let messageText: string | SVGTextElement | SVGSVGElement | any;

  onMounted(() => {
    messageRect = mr.value;
    messageText = tr.value;
  });

  function adjustMessageRect(): void {
    // must get dimensions of text box to fit bubble around
    const padding = 20;
    const textBox = messageText.getBBox();
    messageRect.setAttribute("x", textBox.x - padding);
    messageRect.setAttribute("y", textBox.y - padding);
    messageRect.setAttribute("width", textBox.width + 2 * padding);
    messageRect.setAttribute("height", textBox.height + 2 * padding);
  }

  function translateMsgSignature(): void {
    if (messageRect.getAttribute("height") !== null) {
      const height = Number(messageRect.getAttribute("height"));
      const p = -10;
      signatureTranslate.value = `translate(-10 ${height + p})`;
    }
  }

  async function drawMessage() {
    // ignore lint error: await needed for proper render
    await adjustMessageRect();
    translateMsgSignature();
  }

  return {
    drawMessage,
    signatureTranslate
  };
}