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

import { humanizeError } from '../api'

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

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

  return {
    loading,
    run,
  }
}