/**
 * WordPress dependencies
 */
import apiFetch from '@safe-wordpress/api-fetch';
import { Button, NoticeList, ProgressBar } from '@safe-wordpress/components';
import { useDispatch, useSelect } from '@safe-wordpress/data';
import domReady from '@safe-wordpress/dom-ready';
import { render, useEffect, useState } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';
import { store as NOTICES } from '@safe-wordpress/notices';

/**
 * Internal dependencies
 */
import './style.scss';
import Logo from '~/nelio-content-images/full-logo.svg';
import { LicenseConnectionStep } from './components/license-connection-step';
import { MessageCreationStep } from './components/message-creation-step';
import { ProfileConnectionStep } from './components/profile-connection-step';

domReady( () => {
	const content = document.getElementById( 'nelio-content-page' );
	render( <Page />, content );
} );

type Step = 'license' | 'connect-profile' | 'create-message' | 'finish';

const Page = () => {
	const [ step, setStep ] = useState< Step >( 'license' );
	const [ isFinishing, markAsFinishing ] = useState( false );
	const { notices, removeNotice } = useNotices();

	const finish = () => {
		markAsFinishing( true );
	};

	useEffect( () => {
		if ( ! isFinishing ) {
			return;
		}
		apiFetch( {
			path: '/nelio-content/v1/wizard/end',
			method: 'POST',
		} )
			.then( () => window.location.reload() )
			.catch( () => {
				markAsFinishing( false );
			} );
	}, [ isFinishing ] );

	return (
		<div className="nelio-content-wizard-page">
			<Header
				step={ step }
				isDisabled={ isFinishing }
				onSkip={ finish }
			/>
			<NoticeList
				notices={ notices }
				className="components-editor-notices__pinned"
				onRemove={ removeNotice }
			/>
			<Content
				step={ step }
				setStep={ setStep }
				isDisabled={ isFinishing }
				onSkip={ finish }
			/>
		</div>
	);
};

// ============
// HELPER VIEWS
// ============

type HeaderProps = {
	readonly step: Step;
	readonly isDisabled: boolean;
	readonly onSkip: () => void;
};

const Header = ( { step, isDisabled, onSkip }: HeaderProps ) => {
	return (
		<div className="nelio-content-wizard-page__header">
			<ProgressBar
				className="nelio-content-wizard-page__header-progress-bar"
				value={ getProgressValue( step ) }
			/>
			<div className="nelio-content-wizard-page__header-content">
				<Logo className="nelio-content-wizard-page__header-logo" />
				{ isSkipButtonVisible( step ) && (
					<Button
						className="nelio-content-wizard-page__header-skip-button"
						variant="tertiary"
						disabled={ isDisabled }
						onClick={ onSkip }
					>
						{ getSkipLabel( step ) }
					</Button>
				) }
			</div>
		</div>
	);
};

type ContentProps = {
	readonly step: Step;
	readonly setStep: ( step: Step ) => void;
	readonly isDisabled: boolean;
	readonly onSkip: () => void;
};

const Content = ( { step, setStep, isDisabled, onSkip }: ContentProps ) => {
	switch ( step ) {
		case 'license':
			return (
				<LicenseConnectionStep
					isDisabled={ isDisabled }
					nextStep={ () => setStep( 'connect-profile' ) }
				/>
			);
		case 'connect-profile':
			return (
				<ProfileConnectionStep
					isDisabled={ isDisabled }
					previousStep={ () => setStep( 'license' ) }
					nextStep={ () => setStep( 'create-message' ) }
				/>
			);
		default:
			return (
				<MessageCreationStep
					isDisabled={ isDisabled }
					previousStep={ () => setStep( 'connect-profile' ) }
					nextStep={ () => setStep( 'finish' ) }
					onFinish={ onSkip }
				/>
			);
	}
};

// =====
// HOOKS
// =====

const useNotices = () => {
	const notices = useSelect(
		( select ) => select( NOTICES ).getNotices(),
		[]
	);
	const { removeNotice } = useDispatch( NOTICES );
	return { notices, removeNotice };
};

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

function getProgressValue( step: string ): number | undefined {
	switch ( step ) {
		case 'license':
			return 25;
		case 'connect-profile':
			return 50;
		case 'create-message':
			return 75;
		default:
			return 100;
	}
}

function getSkipLabel( step: string ): string {
	switch ( step ) {
		case 'connect-profile':
		case 'create-message':
			return _x( 'Skip guided setup', 'command', 'nelio-content' );
		default:
			return '';
	}
}
function isSkipButtonVisible( step: string ) {
	switch ( step ) {
		case 'connect-profile':
		case 'create-message':
			return true;
		default:
			return false;
	}
}