import { useReducer, useMemo, useRef, useEffect } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';

function reducer( state, action ) {
	return {
		...state,
		[ action.type ]: action.value,
	};
}

export function useStyleIndicator( computedStyles, panelControls, content = '', deviceAttributes = {} ) {
	const [ controlGlobalStyle, dispatchControlGlobalStyle ] = useReducer( reducer, panelControls );

	const styleSources = applyFilters(
		'generateblocks.editor.panel.computedStyleSources',
		{},
		computedStyles,
		Object.keys( controlGlobalStyle ),
		deviceAttributes,
	);
	const hasGlobalStyle = useMemo( () => {
		return Object.values( controlGlobalStyle ).some( ( control ) => control === true );
	}, [ controlGlobalStyle ] );

	const prevContentLength = useRef( 0 );
	const currentContentLength = content ? content.length : 0;
	const contentWasUpdated = prevContentLength.current !== currentContentLength;

	useEffect( () => {
		prevContentLength.current = currentContentLength;
	}, [ content ] );

	return { dispatchControlGlobalStyle, styleSources, hasGlobalStyle, contentWasUpdated };
}