import { React } from '@gravityforms/libraries';
import { getModules } from './utils';

const { useEffect, useState } = React;

/**
 * @function getOrganizedData
 * @description Get the organized data for the data grid.
 *
 * @since 5.1.0
 *
 * @param {object}  params             The parameters to get the organized data.
 * @param {number}  params.currentPage The current page.
 * @param {Array}   params.data        The data to organize.
 * @param {number}  params.dataPerPage The number of data per page.
 * @param {boolean} params.useAjax     Whether to use AJAX to load data.
 *
 * @return {Array} The organized data.
 */
export const getOrganizedData = ( {
	currentPage = 0,
	data = [],
	dataPerPage = 20,
	useAjax = false,
} ) => {
	let organizedData = [];
	const sortedData = [ ...data ];

	// @todo: fix when implementing sorting.
	// if ( sortable && sortColumn ) {
	// 	sortedData.sort( ( a, b ) => {
	// 		if ( a[ sortColumn ] < b[ sortColumn ] ) {
	// 			return sortDirection === 'asc' ? -1 : 1;
	// 		}
	// 		if ( a[ sortColumn ] > b[ sortColumn ] ) {
	// 			return sortDirection === 'asc' ? 1 : -1;
	// 		}
	// 		return 0;
	// 	} );
	// }

	if ( ! useAjax ) {
		organizedData = sortedData.slice( currentPage * dataPerPage, ( currentPage + 1 ) * dataPerPage );
	} else {
		organizedData = data;
	}

	return organizedData;
};

/**
 * @module useDataGridState
 * @description A hook to manage the state of a data grid.
 *
 * @since 5.1.0
 *
 * @param {Array}   data         The data to display in the data grid.
 * @param {number}  dataPerPage  The number of items to display per page.
 * @param {object}  initialState The initial state of the data grid.
 * @param {Array}   modules      The modules to use in the data grid.
 * @param {boolean} useAjax      Whether to use AJAX to load data.
 *
 * @return {object} The data grid state and actions.
 */
const useDataGridState = ( {
	data = [],
	dataPerPage = 20,
	initialState = {},
	modules = [],
	useAjax = false,
} ) => {
	const [ isLoading, setIsLoading ] = useState( initialState?.isLoading || false );
	const [ organizedData, setOrganizedData ] = useState( () => getOrganizedData( {
		currentPage: initialState?.moduleState?.currentPage || 0,
		data,
		dataPerPage,
		useAjax,
	} ) );
	const [ gridLocked, setGridLocked ] = useState( initialState?.gridLocked || false );
	const [ moduleState, setModuleState ] = useState( () => {
		const {
			BulkActions,
			Pagination,
			Search,
			SimpleFilters,
			DateFilters,
		} = getModules( modules, [ 'BulkActions', 'Pagination', 'Search', 'SimpleFilters', 'DateFilters' ] );

		return {
			...( ( BulkActions && BulkActions?.getDefaultState() ) || {} ),
			...( ( Pagination && Pagination?.getDefaultState() ) || {} ),
			...( ( Search && Search?.getDefaultState() ) || {} ),
			...( ( SimpleFilters && SimpleFilters?.getDefaultState() ) || {} ),
			...( ( DateFilters && DateFilters?.getDefaultState() ) || {} ),
			...initialState?.moduleState || {},
		};
	} );

	const updateModuleState = ( newState ) => {
		setModuleState( { ...moduleState, ...newState } );
	};

	useEffect( () => {
		setGridLocked( organizedData.length === 0 || isLoading );
	}, [ organizedData, isLoading ] );

	return {
		moduleState,
		updateModuleState,
		isLoading,
		setIsLoading,
		gridLocked,
		setGridLocked,
		organizedData,
		setOrganizedData,
	};
};

export default useDataGridState;
