import { __ } from '@wordpress/i18n';
import { SnackbarList, Button } from '@wordpress/components';
import {
	useState,
	useEffect,
	useCallback,
	createContext,
	useContext,
	Component,
} from '@wordpress/element';
import { useRoute } from './router';
import { config } from './api';
import { I } from './ui';
import { getPage, onPagesChange } from './registry';
import './pages';

export type Notify = ( content: string, status?: string ) => void;
const NoticeContext = createContext< Notify >( () => {} );
export const useNotice = () => useContext( NoticeContext );

/** Keeps one broken screen from taking the whole admin down. */
class ErrorBoundary extends Component<
	{ resetKey: string; children?: React.ReactNode },
	{ error: any }
> {
	constructor( props ) {
		super( props );
		this.state = { error: null };
	}
	static getDerivedStateFromError( error ) {
		return { error };
	}
	componentDidUpdate( prev ) {
		if ( prev.resetKey !== this.props.resetKey && this.state.error ) {
			this.setState( { error: null } );
		}
	}
	render() {
		if ( this.state.error ) {
			return (
				<div className="ss-crash">
					<I name="warn" size={ 28 } />
					<h2>{ __( 'This screen hit an error', 'streamsera' ) }</h2>
					<p>
						{ __(
							'Your data is safe. Reload the page; if it keeps happening, send us the message below.',
							'streamsera'
						) }
					</p>
					<code>
						{ String(
							this.state.error?.message || this.state.error
						) }
					</code>
					<Button
						variant="primary"
						onClick={ () => window.location.reload() }
					>
						{ __( 'Reload', 'streamsera' ) }
					</Button>
				</div>
			);
		}
		return this.props.children;
	}
}

export default function App() {
	const route = useRoute();
	const [ notices, setNotices ] = useState( [] );

	const notify = useCallback( ( content, status = 'success' ) => {
		const id =
			Date.now().toString( 36 ) +
			Math.random().toString( 36 ).slice( 2, 5 );
		setNotices( ( n ) => [
			...n,
			{ id, content, status, explicitDismiss: false },
		] );
		setTimeout(
			() => setNotices( ( n ) => n.filter( ( x ) => x.id !== id ) ),
			4000
		);
	}, [] );

	// Re-render when an add-on registers a page after boot.
	const [ , bump ] = useState( 0 );
	useEffect( () => onPagesChange( () => bump( ( n ) => n + 1 ) ), [] );

	const def = getPage( route.page ) || getPage( 'dashboard' );
	const PageComponent = def.Component;
	const page = <PageComponent id={ route.id } parts={ route.parts } />;
	const isBuilder = !! def.fullBleed?.( route );
	useEffect( () => {
		document.body.classList.toggle( 'ss-builder-open', isBuilder );
		return () => document.body.classList.remove( 'ss-builder-open' );
	}, [ isBuilder ] );

	return (
		<NoticeContext.Provider value={ notify }>
			<div
				className={ `ss-admin ${
					isBuilder ? 'ss-admin--builder' : ''
				}` }
				data-version={ config.version }
			>
				<ErrorBoundary resetKey={ `${ route.page }/${ route.id }` }>
					<main className="ss-main">{ page }</main>
				</ErrorBoundary>
				<SnackbarList
					notices={ notices }
					onRemove={ ( id ) =>
						setNotices( ( n ) => n.filter( ( x ) => x.id !== id ) )
					}
					className="ss-snackbars"
				/>
			</div>
		</NoticeContext.Provider>
	);
}