/**
 * The first sync after connecting: fills the store every screen reads
 * (Razorbooking_Sync), every part at once. Connecting itself doesn't wait for it, so the
 * admin lands here at once instead of on a page that is still loading.
 */

import { useCallback, useEffect, useState } from 'react';
import { EmptyState } from '../ds';
import { RefreshCw, TriangleAlert } from '../icons';
import { messageOf } from '../lib/api';
import { syncAll } from '../lib/sync';

interface FirstSyncProps {
	/** Called once the store is filled; the app then reads the connection again. */
	onDone: () => void;
}

export function FirstSync( { onDone }: FirstSyncProps ) {
	const [ error, setError ] = useState< string | null >( null );

	const run = useCallback( async () => {
		setError( null );

		try {
			await syncAll();
			onDone();
		} catch ( caught ) {
			setError( messageOf( caught, 'Couldn’t reach RazorBooking.' ) );
		}
	}, [ onDone ] );

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

	if ( error ) {
		return (
			<EmptyState
				icon={ <TriangleAlert size={ 20 } /> }
				title="Couldn’t finish setting up"
				description={ `${ error } Your site isn’t affected. Try again in a moment.` }
				actionLabel="Try again"
				onAction={ run }
			/>
		);
	}

	return (
		<EmptyState
			icon={ <RefreshCw size={ 20 } className="animate-spin" /> }
			title="Setting things up…"
			description="This takes a few seconds."
		/>
	);
}