import { computed, watch } from "vue"

import { useFile } from "@/hooks/useFile.hook"
import { resolvePath } from "@/modules/repo/services/resolvePath"
import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"

const SRC_PREFIX = "data:image/jpeg;charset=utf-8;base64,"

export const useImages = (sha: string) => {
  const store = useUserRepoStore()

  const currentFilePath = computed(
    () => store.files.find((file) => file.sha === sha)?.path
  )

  watch(
    currentFilePath,
    (filePath) => {
      if (!filePath) {
        return
      }

      const images = document.querySelectorAll(`.note-${sha} img`)

      images.forEach(async (image) => {
        const src = image.getAttribute("src")
        if (!src || src.startsWith(SRC_PREFIX)) {
          return
        }

        const imageFilePath = resolvePath(
          filePath,
          image.getAttribute("src") ?? ""
        )

        const imageFile = store.files.find(
          (file) => file.path === imageFilePath
        )

        if (!imageFile?.sha) {
          return
        }
        const { getCachedFileContent } = useFile(imageFile.sha, false)

        const fileContent = await getCachedFileContent()
        image.setAttribute("src", `${SRC_PREFIX} ${fileContent}`)
      })
    },
    { immediate: true }
  )
}