import React, { useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import DefaultStep from '../../components/default-step';
import SitePreview from '../../components/site-preview';
import { useStateValue } from '../../store/store';
import { trackOnboardingStep } from '../../utils/functions';
import { CustomizeSteps } from './customize-steps';

const CustomizeSite = () => {
	const [ { currentCustomizeIndex, currentIndex, builder }, dispatch ] =
		useStateValue();

	const currentStepObject = CustomizeSteps[ currentCustomizeIndex ];
	let CurrentStepContent;
	let CurrentStepControls;

	if ( typeof currentStepObject !== 'undefined' ) {
		CurrentStepContent = currentStepObject.content;
		CurrentStepControls = currentStepObject.controls;
	}

	useEffect( () => {
		const previousIndex = parseInt( currentCustomizeIndex ) - 1;
		const nextIndex = parseInt( currentCustomizeIndex ) + 1;

		if ( nextIndex > 0 && nextIndex < CustomizeSteps.length ) {
			document.body.classList.remove( CustomizeSteps[ nextIndex ].class );
		}

		if ( previousIndex >= 0 ) {
			document.body.classList.remove(
				CustomizeSteps[ previousIndex ].class
			);
		}

		document.body.classList.add(
			CustomizeSteps[ currentCustomizeIndex ].class
		);

		// Track template preview step when component mounts
		trackOnboardingStep( 'template-preview' );
	}, [] );

	const setNextStep = () => {
		if ( CustomizeSteps.length - 1 === currentCustomizeIndex ) {
			return null;
		}
		if ( builder === 'beaver-builder' || builder === 'brizy' ) {
			dispatch( {
				type: 'set',
				currentIndex: currentIndex + 1,
			} );
		} else {
			dispatch( {
				type: 'set',
				currentCustomizeIndex: currentCustomizeIndex + 1,
			} );
		}
	};

	const setPreviousStep = () => {
		if ( 0 === currentCustomizeIndex ) {
			return null;
		}
		dispatch( {
			type: 'set',
			currentCustomizeIndex: currentCustomizeIndex - 1,
		} );
	};

	const preventRefresh = ( event ) => {
		event.returnValue = __(
			'Are you sure you want to cancel the site import process?',
			'astra-sites'
		);
		return event;
	};

	useEffect( () => {
		window.addEventListener( 'beforeunload', preventRefresh ); // eslint-disable-line
		return () =>
			window.removeEventListener( 'beforeunload', preventRefresh ); // eslint-disable-line
	} );

	return (
		<DefaultStep
			stepName={ CustomizeSteps[ currentCustomizeIndex ].class }
			content={
				<CurrentStepContent
					customizeStep={ true }
					onNextClick={ setNextStep }
					onPreviousClick={ setPreviousStep }
				/>
			}
			controls={
				CurrentStepControls && (
					<CurrentStepControls
						customizeStep={ true }
						onNextClick={ setNextStep }
						onPreviousClick={ setPreviousStep }
					/>
				)
			}
			actions={ null }
			preview={ <SitePreview /> }
		/>
	);
};

export default CustomizeSite;
