/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { FormProvider, useForm } from 'react-hook-form';

/**
 * Internal Dependencies
 */
import { StepTitle } from '../components/StepTitle';
import { ModulesTab } from '@admin/screen-settings/components/ModulesTab';
import {
	fetchSettings,
	saveSettings,
} from '@admin/screen-settings/hooks/settings-api';

export function StepModules() {
	const [ tab, setTab ] = useState( null );
	const methods = useForm( { defaultValues: {} } );

	useEffect( () => {
		fetchSettings().then( ( schema ) => {
			const modulesTab =
				schema.tabs.find( ( t ) => t.key === 'modules' ) ?? null;
			setTab( modulesTab );
			methods.reset( schema.values );
		} );
		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount only
	}, [] );

	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
	const onSave = methods.handleSubmit( async ( formValues ) => {
		await saveSettings( formValues );
		const schema = await fetchSettings();
		const modulesTab =
			schema.tabs.find( ( t ) => t.key === 'modules' ) ?? null;
		setTab( modulesTab );
		methods.reset( schema.values );
	} );

	if ( ! tab ) {
		return null;
	}

	return (
		<div className="flex flex-col gap-8">
			<StepTitle
				title={ __( 'Enable modules', 'advanced-ads' ) }
				description={ __(
					'Turn on the features you need. You can change these later in Settings → Modules.',
					'advanced-ads'
				) }
			/>
			<FormProvider { ...methods }>
				<ModulesTab tab={ tab } onSave={ onSave } />
			</FormProvider>
		</div>
	);
}