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((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,
 toPromise: () => promise,
 };
}