import superagent from 'superagent';
import { AjaxConfig, AjaxState } from './ajax.model';
import { useEffect, useState } from 'react';
import { useStoreState } from '../store/store.hooks';

export const runAjax = async function runAjax(
	url: string,
	config: Partial<AjaxConfig>,
	setData: any,
	setState: any
) {
	try {
		setState(AjaxState.Loading);
		const method = config.method || 'get';
		const data = config.data || {};
		const request = superagent[config.method || 'get'](url);

		if (method === 'get') {
			request.query(data);
		} else {
			request.send(data);
		}

		const result = await request;

		if (result.body.status === 'ERROR') {
			setState(AjaxState.Error);
			return null;
		}

		setData(result.body.payload);
		setState(AjaxState.Loaded);
	} catch (e) {
		setState(AjaxState.Error);
	}
};

export function useAjax<T = any>(
	url: string,
	config: Partial<AjaxConfig> = {},
	shouldRun = true
): [AjaxState, T, any] {
	const [state, setState] = useState(AjaxState.Idle);
	const [data, setData] = useState<any>(undefined);
	const [runCounter, setRunCounter] = useState(0);

	useEffect(() => {
		if (shouldRun) {
			setState(AjaxState.Loading);
			runAjax(url, config, (newData: T) => setData(newData), setState);
		}
	}, [JSON.stringify({ url, config, shouldRun, runCounter })]);

	return [state, data as T, () => setRunCounter(runCounter + 1)];
}

export function useApi<T>(endpoint: string, config: Partial<AjaxConfig> = {}) {
	const token = useStoreState((store) => store.authentication.token);
	return useAjax(
		`${process.env.API_URL}/${endpoint}`,
		{
			...config,
			data: {
				...config.data,
				externalToken: token,
			},
		},
		!!token
	);
}

export function useAction<T = any>(action: string, data = {} as any, shouldRun?: boolean) {
	// @ts-ignore
	const url = window.ajaxurl;
	return useAjax<T>(url, { data: { ...data, action } }, shouldRun);
}