import { useCallback, useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Button, Guide } from '@wordpress/components';
import { adminGet } from './adminApi';
import { GuideIcon, StoreIcon, CategoryIcon, SettingsIcon } from './icons';

const GuideStep = ( {
	Icon,
	step,
	total,
	title,
	children,
	action,
	actionLabel,
} ) => (
	<div className="cliq-sl-guide__step">
		<div className="cliq-sl-guide__heading">
			<span className="cliq-sl-guide__icon">
				<Icon size={ 25 } />
			</span>
			<div className="cliq-sl-guide__meta">
				<span className="cliq-sl-guide__eyebrow">
					{ __( 'Setup guide', 'cliq-store-locator' ) }
				</span>
				<span className="cliq-sl-guide__counter">
					{ `0${ step } / 0${ total }` }
				</span>
			</div>
		</div>
		<div className="cliq-sl-guide__body">
			<h2>{ title }</h2>
			<div className="cliq-sl-guide__copy">{ children }</div>
			{ action && (
				<Button variant="primary" onClick={ action }>
					{ actionLabel }
				</Button>
			) }
		</div>
	</div>
);

const OnboardingGuide = () => {
	const [ open, setOpen ] = useState( false );

	const load = useCallback( () => {
		adminGet( 'onboarding' )
			.then( ( response ) => {
				if ( Number( response?.storeCount || 0 ) === 0 ) {
					setOpen( true );
				}
			} )
			.catch( () => {} );
	}, [] );

	useEffect( () => {
		load();
	}, [ load ] );

	const go = ( hash ) => {
		setOpen( false );
		window.location.hash = hash;
	};

	const pages = [
		{
			content: (
				<GuideStep
					Icon={ SettingsIcon }
					step={ 1 }
					total={ 4 }
					title={ __(
						'Choose your map and search defaults',
						'cliq-store-locator'
					) }
					action={ () => go( '#/settings' ) }
					actionLabel={ __(
						'Open locator settings',
						'cliq-store-locator'
					) }
				>
					<p>
						{ __(
							'Choose Leaflet for a key-free map, or Google Maps and add the required browser API key. Set the default location, distance unit, map height and the filters your visitors need.',
							'cliq-store-locator'
						) }
					</p>
				</GuideStep>
			),
		},
		{
			content: (
				<GuideStep
					Icon={ CategoryIcon }
					step={ 2 }
					total={ 4 }
					title={ __(
						'Add useful store categories',
						'cliq-store-locator'
					) }
					action={ () => go( '#/categories' ) }
					actionLabel={ __(
						'Manage categories',
						'cliq-store-locator'
					) }
				>
					<p>
						{ __(
							'Create categories visitors will actually search for, such as Showroom, Pharmacy or Pickup. Categories become available in the locator filter and can be assigned while editing each store.',
							'cliq-store-locator'
						) }
					</p>
				</GuideStep>
			),
		},
		{
			content: (
				<GuideStep
					Icon={ StoreIcon }
					step={ 3 }
					total={ 4 }
					title={ __( 'Add your first store', 'cliq-store-locator' ) }
					action={ () => go( '#/stores' ) }
					actionLabel={ __( 'Add a store', 'cliq-store-locator' ) }
				>
					<p>
						{ __(
							'Add the store name, address and contact details, place it accurately on the map, assign its categories and enter opening hours. Save it as active so it can appear publicly.',
							'cliq-store-locator'
						) }
					</p>
				</GuideStep>
			),
		},
		{
			content: (
				<GuideStep
					Icon={ GuideIcon }
					step={ 4 }
					total={ 4 }
					title={ __( 'Publish the locator', 'cliq-store-locator' ) }
				>
					<p>
						{ __(
							'Add the Store Locator block to a page, or paste this shortcode in any WordPress content area:',
							'cliq-store-locator'
						) }
					</p>
					<code>[cliq_store_locator]</code>
					<p>
						{ __(
							'View the page while logged out and test location search, category filtering, store selection and the mobile layout.',
							'cliq-store-locator'
						) }
					</p>
				</GuideStep>
			),
		},
	];

	return (
		<>
			<button
				type="button"
				className="cliq-sl-guide-launch"
				onClick={ () => setOpen( true ) }
			>
				<GuideIcon size={ 15 } />
				<span>{ __( 'Guide', 'cliq-store-locator' ) }</span>
			</button>
			{ open && (
				<Guide
					className="cliq-sl-guide"
					pages={ pages }
					onFinish={ () => setOpen( false ) }
				/>
			) }
		</>
	);
};

export default OnboardingGuide;
