import Modal from '@elementor/ui/Modal';
import Box from '@elementor/ui/Box';
import { createRoot } from 'react-dom/client';
import { useEffect, useState } from 'react';
import apiFetch from '@wordpress/api-fetch';
import Stack from '@elementor/ui/Stack';
import Update from './components/whats-new/update';
import Typography from '@elementor/ui/Typography';
import { __ } from '@wordpress/i18n';

const style = {
	position: 'absolute',
	top: '50%',
	left: '50%',
	transform: 'translate(-50%, -50%)',
	bgcolor: 'background.paper',
	border: '1px solid #000',
	boxShadow: 24,
	p: 2,
	maxHeight: '80vh',
	overflowY: 'auto',
};

const App = () => {
	const [ whatsNew, setWhatsNew ] = useState( [] );
	const [ open, setOpen ] = useState( false );

	const handleOpen = ( event ) => {
		event.preventDefault();
		setOpen( true );
	};

	const handleClose = () => setOpen( false );

	useEffect( () => {
		apiFetch( { path: '/elementor-hello-plus/v1/whats-new' } ).then( ( response ) => {
			setWhatsNew( response );
		} ).catch( () => {
			setWhatsNew( [] );
		} );

		const button = document.getElementById( 'hello-plus-whats-new-link' );

		if ( button ) {
			button.addEventListener( 'click', handleOpen );
		}

		return () => {
			if ( button ) {
				button.removeEventListener( 'click', handleOpen );
			}
		};
	}, [] );

	return (
		<div>
			<Modal
				open={ open }
				onClose={ handleClose }
				aria-labelledby="modal-modal-title"
				aria-describedby="modal-modal-description"
			>
				<Box sx={ style }>
					<Typography variant={ 'h4' }>{ __( 'Changelog', 'hello-plus' ) }</Typography>
					<Stack direction={ 'column' } gap={ 1 } sx={ { mt: 2 } }>
						{ whatsNew.map( ( item ) => <Update key={ item.id } { ...item } /> ) }
					</Stack>
				</Box>
			</Modal>
		</div>
	);
};

document.addEventListener( 'DOMContentLoaded', () => {
	const container = document.getElementById( 'hello-plus-whats-new' );

	if ( container ) {
		const root = createRoot( container );
		root.render( <App /> );
	}
} );