import { useCallback, useEffect, useMemo, useState } from 'react';
import { HelpTab } from './HelpTab';
import { MediaLibraryTab } from './MediaLibraryTab';
import { ShortcodeTab } from './ShortcodeTab';
import { voltaxLog } from './debug';
import type { InsertPayload, ModalOpenOptions, PlaybackMethod, TabId } from './types';
import {
	buildShortcode,
	isInsertPayloadValid,
	isShortcodeTabContext,
	normalizePlaybackmethod,
	supportsPlaybackmethodUi,
} from './utils';

type AppProps = {
	isOpen: boolean;
	options: ModalOpenOptions;
	onClose: () => void;
};

export function App( { isOpen, options, onClose }: AppProps ) {
	const config = window.voltaxModalConfig!;
	const enableShortcode = options.enableShortcode !== false && isShortcodeTabContext( options.context );
	const tabs = useMemo( () => {
		const list: { id: TabId; label: string }[] = [];
		if ( config.enableVideoLibrary ) {
			list.push( { id: 'videos', label: config.i18n.videos } );
		}
		list.push( { id: 'playlists', label: config.i18n.playlists } );
		if ( enableShortcode ) {
			list.push( { id: 'shortcode', label: config.i18n.shortcode } );
		}
		if ( config.guideUrl ) {
			list.push( { id: 'help', label: config.i18n.help } );
		}
		return list;
	}, [ config.enableVideoLibrary, config.guideUrl, config.i18n, enableShortcode ] );

	const initialTab = options.tab && tabs.some( ( tab ) => tab.id === options.tab )
		? options.tab
		: tabs[ 0 ].id;

	const [ activeTab, setActiveTab ] = useState<TabId>( initialTab );
	const [ selection, setSelection ] = useState<InsertPayload | null>( null );
	const [ playbackmethod, setPlaybackmethod ] = useState<PlaybackMethod>( 'autoplay' );

	useEffect( () => {
		if ( ! isOpen ) {
			return;
		}
		setActiveTab( initialTab );
		setSelection( null );
		setPlaybackmethod( 'autoplay' );
	}, [ isOpen, initialTab ] );

	useEffect( () => {
		if ( ! isOpen ) {
			return;
		}
		const onKeyDown = ( event: KeyboardEvent ) => {
			if ( event.key === 'Escape' ) {
				onClose();
			}
		};
		document.addEventListener( 'keydown', onKeyDown );
		document.body.style.overflow = 'hidden';
		return () => {
			document.removeEventListener( 'keydown', onKeyDown );
			document.body.style.overflow = '';
		};
	}, [ isOpen, onClose ] );

	const handleInsert = useCallback( () => {
		if ( ! selection ) {
			window.alert( config.i18n.requiredId );
			return;
		}

		const payload: InsertPayload = supportsPlaybackmethodUi( selection )
			? { ...selection, playbackmethod: normalizePlaybackmethod( playbackmethod ) }
			: selection;
		const shortcode = buildShortcode( payload );
		if ( ! shortcode ) {
			window.alert( config.i18n.requiredId );
			return;
		}

		const detail = {
			payload,
			shortcode,
			context: options.context || '',
			editorId: options.editorId || '',
		};

		voltaxLog( 'handleInsert dispatch scheduled', detail );

		onClose();

		window.setTimeout( () => {
			voltaxLog( 'dispatching voltax-modal-insert', detail );
			document.dispatchEvent(
				new CustomEvent( 'voltax-modal-insert', {
					detail,
				} )
			);
		}, 50 );
	}, [ selection, playbackmethod, config.i18n.requiredId, options.context, options.editorId, onClose ] );

	if ( ! isOpen ) {
		return null;
	}

	const showFooter = activeTab !== 'help';
	const showPlayback = activeTab === 'videos' || activeTab === 'playlists';

	return (
		<div className="voltax-modal-overlay" onMouseDown={ onClose }>
			<div className="voltax-modal-shell" role="dialog" aria-modal="true" onMouseDown={ ( event ) => event.stopPropagation() }>
				<div className="voltax-modal-header">
					<h2>{ config.i18n.title }</h2>
					<button type="button" className="voltax-modal-close" aria-label={ config.i18n.close } onClick={ onClose }>
						×
					</button>
				</div>
				<div className="voltax-modal-body">
					<nav className="voltax-modal-nav" aria-label="Modal sections">
						{ tabs.map( ( tab ) => (
							<button
								key={ tab.id }
								type="button"
								className={ activeTab === tab.id ? 'is-active' : '' }
								onClick={ () => {
									setActiveTab( tab.id );
									setSelection( null );
								} }
							>
								{ tab.label }
							</button>
						) ) }
					</nav>
					<div className="voltax-modal-panel">
						{ activeTab === 'videos' ? (
							<MediaLibraryTab mode="video" onSelect={ setSelection } />
						) : null }
						{ activeTab === 'playlists' ? (
							<MediaLibraryTab mode="playlist" onSelect={ setSelection } />
						) : null }
						{ activeTab === 'shortcode' ? (
							<ShortcodeTab onSelect={ setSelection } />
						) : null }
						{ activeTab === 'help' ? <HelpTab /> : null }
					</div>
				</div>
				{ showFooter ? (
					<div className="voltax-modal-footer">
						{ showPlayback ? (
							<div className="voltax-modal-playback">
								<label htmlFor="voltax-modal-playbackmethod">{ config.i18n.playback }</label>
								<select
									id="voltax-modal-playbackmethod"
									value={ playbackmethod }
									onChange={ ( event ) => {
										setPlaybackmethod( normalizePlaybackmethod( event.target.value ) );
									} }
								>
									<option value="autoplay">{ config.i18n.autoplay }</option>
									<option value="clicktoplay">{ config.i18n.clickToPlay }</option>
								</select>
							</div>
						) : (
							<span className="voltax-modal-footer-spacer" aria-hidden="true" />
						) }
						<div className="voltax-modal-footer-actions">
							<button type="button" className="button" onClick={ onClose }>
								{ config.i18n.cancel }
							</button>
							<button type="button" className="button button-primary" disabled={ ! isInsertPayloadValid( selection ) } onClick={ handleInsert }>
								{ config.i18n.insert }
							</button>
						</div>
					</div>
				) : null }
			</div>
		</div>
	);
}