import { useState, useEffect } from 'react';

export default function useAjax() {
	const [ ajax, setAjax ] = useState( null ),
		initialStatusKey = 'initial',
		uploadInitialState = {
			status: initialStatusKey,
			isComplete: false,
			response: null,
		},
		[ ajaxState, setAjaxState ] = useState( uploadInitialState ),
		ajaxActions = {
			reset: () => setAjaxState( initialStatusKey ),
		};

	useEffect( () => {
		if ( ajax ) {
			const formData = new FormData();

			if ( ajax.data ) {
				for ( const key in ajax.data ) {
					formData.append( key, ajax.data[ key ] );
				}

				if ( ! ajax.data.nonce ) {
					formData.append( '_nonce', elementorCommon.config.ajax.nonce );
				}
			}

			const options = {
				type: 'post',
				url: elementorCommon.config.ajax.url,
				headers: {},
				cache: false,
				contentType: false,
				processData: false,
				...ajax,
				data: formData,
				success: ( response ) => {
					const status = response.success ? 'success' : 'error';

					setAjaxState( ( prevState ) => ( { ...prevState, status, response: response?.data } ) );
				},
				error: () => {
					setAjaxState( ( prevState ) => ( { ...prevState, status: 'error' } ) );
				},
				complete: () => {
					setAjaxState( ( prevState ) => ( { ...prevState, isComplete: true } ) );
				},
			};

			jQuery.ajax( options );
		}
	}, [ ajax ] );

	return {
		ajax,
		setAjax,
		ajaxState,
		ajaxActions,
	};
}