import { useEffect, useState } from 'react';
import type { InsertPayload } from './types';
import { extractVoltaxContentId, isAllowedShortcodeInput, resolveShortcodeInput } from './utils';

type ShortcodeTabProps = {
	onSelect: ( payload: InsertPayload | null ) => void;
};

export function ShortcodeTab( { onSelect }: ShortcodeTabProps ) {
	const config = window.voltaxModalConfig!;
	// Inject-only: never prefill from an existing selection.
	const [ value, setValue ] = useState( '' );
	const trimmed = value.trim();
	const isInvalid = trimmed.length > 0 && ! isAllowedShortcodeInput( value );

	useEffect( () => {
		const shortcode = resolveShortcodeInput( value );
		if ( ! shortcode ) {
			onSelect( null );
			return;
		}

		const contentId = extractVoltaxContentId( shortcode );
		onSelect( {
			shortcode,
			// Only set id for Voltax/mm-video content IDs — STN keys stay shortcode-only.
			id: contentId,
			type: contentId ? 'video' : undefined,
			title: contentId || shortcode,
		} );
	}, [ value, onSelect ] );

	return (
		<div className="voltax-shortcode-form">
			<p>
				<label htmlFor="voltax-shortcode-input">{ config.i18n.shortcodeInput }</label>
				<input
					id="voltax-shortcode-input"
					type="text"
					className="widefat"
					value={ value }
					placeholder={ config.i18n.shortcodePlaceholder }
					onChange={ ( event ) => setValue( event.target.value ) }
				/>
			</p>
			{ isInvalid ? (
				<p className="voltax-shortcode-error" role="alert">
					{ config.i18n.invalidShortcode }
				</p>
			) : null }
			<p className="voltax-shortcode-help">{ config.i18n.shortcodeHelp }</p>
		</div>
	);
}