import { computed, onMounted, ref } from "vue";
export default function useMessageItemComp(m: string, id: string) {
  const x = ref(0)
  const xOffset = async () => {
      const paddingLeft = 40;
      const messageMargin = 20;
      const winW = 350;
      let x: number;
        const msg = await document.getElementById(id);
        if (msg) {
          const messageWidth = msg.getBoundingClientRect().width;
          switch (m) {
              case "sf":
                  x = winW - messageWidth;
                  break;
              case "ai":
                  x = messageMargin + (winW -messageWidth) / 2;
                  break;
              default:
                  x = paddingLeft;
          }
          return x;
        }
  }

  onMounted(async () => {
    const result = await xOffset();
    if(result) {
      x.value =  result;
    }
  })


  const textFill = computed(() => {
    switch (m) {
      case "sf":
        return "#fff";
      default:
        return "#000";
    }
  });

  const bubbleFill = computed(() => {
    switch (m) {
      case "sf":
        return "#61b4f4";
      case "ai":
        return "#DDDDDD";
      default:
        return "#fff";
    }
  });

  const startingOffset = computed(() => {
    const messageRenderer = document.getElementById('messageRenderer')
    if (messageRenderer) {
      const rect = messageRenderer.getBoundingClientRect();
      let Y = 600;
      if (rect.height > 500) {
        Y = rect.height + 75;
      }
      return `translate(${x.value} ${Y})`;
    }
  });

  return {
    textFill,
    bubbleFill,
    startingOffset
  };
}