/**
 * WordPress dependencies
 */
import apiFetch from '@safe-wordpress/api-fetch';
import {
	Button,
	CheckboxControl,
	Dashicon,
	ExternalLink,
} from '@safe-wordpress/components';
import domReady from '@safe-wordpress/dom-ready';
import {
	createInterpolateElement,
	useEffect,
	useState,
	render,
} from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';
import { addQueryArgs } from '@safe-wordpress/url';

/**
 * External dependencies
 */
import clsx from 'clsx';
import type { Dict, Maybe } from '@nelio-content/types';

/**
 * Internal dependencies
 */
import './style.scss';
import Logo from '~/nelio-content-images/full-logo.svg';

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

const Page = () => {
	const [ error, setError ] = useState( '' );
	const [ isPolicyAccepted, acceptPolicy ] = useState( false );
	const [ isInitializing, markAsInitializing ] = useState( false );
	const [ isWizardRequested, markAsWizardRequested ] = useState( false );

	const initialize = () => {
		setError( '' );
		markAsInitializing( true );
	};

	useEffect( () => {
		if ( ! isInitializing ) {
			return;
		}
		apiFetch( {
			path: addQueryArgs( '/nelio-content/v1/site/free', {
				isWizardRequested,
			} ),
			method: 'POST',
		} )
			.then( () => window.location.reload() )
			.catch( ( e: Dict< string > ) => {
				setError( e.message ?? '' );
				markAsInitializing( false );
				markAsWizardRequested( false );
			} );
	}, [ isInitializing, isWizardRequested ] );

	return (
		<div className="nelio-content-welcome-page">
			<Header />
			<TermsAndPrivacy
				disabled={ isInitializing }
				checked={ isPolicyAccepted }
				onChange={ acceptPolicy }
			/>
			<Actions
				disabled={ isInitializing || ! isPolicyAccepted }
				onStart={ () => {
					markAsWizardRequested( true );
					initialize();
				} }
				onSkip={ () => {
					markAsWizardRequested( false );
					initialize();
				} }
				isRunning={ isInitializing }
			/>
			<Error error={ error } />
		</div>
	);
};

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

const Header = () => (
	<>
		<div>
			<Logo className="nelio-content-welcome-page__logo" />
		</div>

		<div className="nelio-content-welcome-page__subtitle">
			{ _x(
				'Plan, write, publish, and distribute content—without leaving WordPress.',
				'user',
				'nelio-content'
			) }
		</div>

		<div className="nelio-content-welcome-page__intro">
			{ _x( 'Welcome to Nelio Content!', 'text', 'nelio-content' ) }
		</div>

		<div className="nelio-content-welcome-page__instructions">
			{ _x(
				'It’s great to have you here with us! We’ll be guiding you through the setup process.',
				'user',
				'nelio-content'
			) }
		</div>
	</>
);

const TermsAndPrivacy = ( {
	disabled,
	checked,
	onChange,
}: {
	readonly disabled?: boolean;
	readonly checked: boolean;
	readonly onChange: ( value: boolean ) => void;
} ) => (
	<div className="nelio-content-welcome-page__policy">
		<CheckboxControl
			className={ clsx( 'nelio-content-welcome-page__policy-checkbox', {
				'nelio-content-welcome-page__policy-checkbox--pulse': ! checked,
			} ) }
			label={ createInterpolateElement(
				_x(
					'Please accept our <tac>Terms and Conditions</tac> and <policy>Privacy Policy</policy> to start using Nelio Content in this site.',
					'user',
					'nelio-content'
				),
				{
					tac: (
						// @ts-expect-error children prop is set by createInterpolateComponent.
						<ExternalLink href="https://neliosoftware.com/legal-information/nelio-content-terms-conditions/" />
					),
					policy: (
						// @ts-expect-error children prop is set by createInterpolateComponent.
						<ExternalLink href="https://neliosoftware.com/privacy-policy-cookies/" />
					),
				}
			) }
			disabled={ disabled }
			checked={ checked }
			onChange={ onChange }
		/>
	</div>
);

const Actions = ( {
	disabled,
	onStart,
	onSkip,
	isRunning,
}: {
	readonly disabled?: boolean;
	readonly onStart: () => void;
	readonly onSkip: () => void;
	readonly isRunning: boolean;
} ) => {
	const [ action, setAction ] = useState< 'start' | 'skip' | null >( null );
	return (
		<div className="nelio-content-welcome-page__actions">
			<Button
				className="nelio-content-welcome-page__skip"
				variant="tertiary"
				isBusy={ isRunning && action === 'skip' }
				disabled={ disabled }
				onClick={ () => {
					setAction( 'skip' );
					onSkip();
				} }
			>
				{ isRunning && action === 'skip'
					? _x( 'Loading…', 'text', 'nelio-content' )
					: _x( 'Skip guided setup', 'command', 'nelio-content' ) }
			</Button>
			<Button
				className="nelio-content-welcome-page__start"
				variant="primary"
				isBusy={ isRunning && action === 'start' }
				disabled={ disabled }
				onClick={ () => {
					setAction( 'start' );
					onStart();
				} }
			>
				{ isRunning && action === 'start'
					? _x( 'Loading…', 'text', 'nelio-content' )
					: _x( 'Set up my calendar', 'command', 'nelio-content' ) }
			</Button>
		</div>
	);
};

const Error = ( { error }: { readonly error: Maybe< string > } ) => {
	if ( ! error ) {
		return null;
	}

	return (
		<div className="nelio-content-welcome-page__error">
			<Dashicon icon="warning" />
			{ error }
		</div>
	);
};