import { ref } from 'vue'
import { ElMessage } from 'element-plus'

import { humanizeError } from '../api'
import { announcePolite } from '../utils/liveRegion'

export function useAsyncAction() {
  const loading = ref(false)
  const errorMessage = ref('')

  function clearError() {
    errorMessage.value = ''
  }

  async function run(task, fallbackMessage) {
    loading.value = true
    clearError()
    try {
      return await task()
    } catch (error) {
      errorMessage.value = humanizeError(error, fallbackMessage)
      announcePolite(errorMessage.value)
      ElMessage.error(errorMessage.value)
      throw error
    } finally {
      loading.value = false
    }
  }

  return {
    clearError,
    errorMessage,
    loading,
    run,
  }
}