import { Button, Flex } from '@wordpress/components';
import apiFetch from "@wordpress/api-fetch";
import { useEffect, useState } from "@wordpress/element";
import { Icon, close } from '@wordpress/icons';

const { __ } = wp.i18n;


function OnboardingModal() {
	const [skipOnboarding, setSkipOnboarding] = useState(false);
	
	const canSkipOnboarding = (skip) => {
		apiFetch({
			path: '/devia/v1/skip-onboarding',
			method: 'POST',
		}).then((response) => {
			setSkipOnboarding(true);

			if (!skip) {
				window.location.href = devia_options.dashboard_link;
				setSkipOnboarding(true);
			}
		});
	};


	useEffect(() => {
		if (devia_options.theme_options.skip_onboarding) {
			setSkipOnboarding(true);
		}

		const handleEsc = (event) => {
			if (event.key === 'Escape') {
				canSkipOnboarding(true);
			}
		};
		window.addEventListener('keydown', handleEsc);

		return () => {
			window.removeEventListener('keydown', handleEsc);
		};
	}, []);



	if (skipOnboarding) {
		return null;
	}

	return (
		<div className={"devia-modal-background"}>
			<div className={"devia-modal-content"}>
				<Button onClick={() => canSkipOnboarding(true)}
					className={"devia-modal-close"}><Icon icon={close} /></Button>

				<h2>{__(`Welcome to ${devia_options.name}!`, devia_options.text_domain)}</h2>
				<p>{__(`Visit the ${devia_options.name} Dashboard and Theme Setup Wizard (Admin Dashboard → ${devia_options.name} Theme) to get your site set up with just a few clicks. Head over there to get started!`, devia_options.text_domain)}</p>
				<Flex className={"devia-modal-inner"} justify='center' align='center' direction='column' gap="3">

					<iframe width="600" height="305" src={ devia_options.theme_params.video_tutorial } title="YouTube video player" frameborder="0" 
						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">
					</iframe>
					
					<Button variant="primary" onClick={() => canSkipOnboarding(false)}>{__(`View ${devia_options.name} Dashboard →`, devia_options.text_domain)}</Button>
				</Flex>
			</div>
		</div>
	);
}

export default OnboardingModal;