import { onMounted, onUnmounted, ref } from 'vue'

interface ScriptOptions {
  src: string
}

export function useScript(opts: ScriptOptions) {
  const isLoading = ref(false)
  const error = ref(false)
  const success = ref(false)
  let script: HTMLScriptElement

  const promise = new Promise<void>((resolve, reject) => {
    onMounted(() => {
      script = document.createElement('script')
      script.type = 'text/javascript'
      script.onload = function () {
        isLoading.value = false
        success.value = true
        error.value = false
        resolve()
      }

      script.onerror = function (err) {
        isLoading.value = false
        success.value = false
        error.value = true
        reject(err)
      }

      script.src = opts.src
      document.head.appendChild(script)
    })
  })

  onUnmounted(() => {
    script && script.remove()
  })

  return {
    isLoading,
    error,
    success,
    load: () => promise,
  }
}