/**
 * WordPress dependencies
 */
import type {
	select as Select,
	subscribe as Subscribe,
} from '@safe-wordpress/data';

/**
 * External dependencies
 */
import type { CssWorkingContentValue } from '@nab/types';

/* eslint-disable */
const parent = window.parent as any;
const select = parent.wp.data.select as typeof Select;
const subscribe = parent.wp.data.subscribe as typeof Subscribe;
/* eslint-enable */

// NOTE. No @nab packages in front.
import type { store as dataStore } from '@nab/data';
const NAB_DATA = 'nab/data' as unknown as typeof dataStore;

export function onContentChanged(
	callback: (
		state: ReadonlyArray< CssWorkingContentValue >,
		prevState: ReadonlyArray< CssWorkingContentValue >
	) => void
): void {
	let prevState: ReadonlyArray< CssWorkingContentValue > | undefined;
	const run = () => {
		const state = getContentChanges();
		if ( prevState && state === prevState ) {
			return;
		}
		prevState = state;

		callback( state, prevState ?? [] );
	};
	subscribe( run, NAB_DATA );
	run();
}

// =======
// HELPERS
// =======

const NO_CHANGES: ReadonlyArray< CssWorkingContentValue > = [];
const getContentChanges = (): ReadonlyArray< CssWorkingContentValue > =>
	select( NAB_DATA ).getPageAttribute( 'css-editor/cssEditorState' )
		?.contentValues ?? NO_CHANGES;