/**
 * Compact HTML tag picker (header / subheading) — button + floating menu.
 */
import { Button, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
const DEFAULT_OPTIONS = [
	{ label: 'div', value: 'div' },
	{ label: 'h1', value: 'h1' },
	{ label: 'h2', value: 'h2' },
	{ label: 'h3', value: 'h3' },
	{ label: 'h4', value: 'h4' },
	{ label: 'h5', value: 'h5' },
	{ label: 'h6', value: 'h6' },
];

/**
 * Companion tag field for a content key (header → headerTag).
 *
 * @param {string} fieldKey
 * @param {Array<object>} fieldSchema
 * @return {object|null}
 */
export function companionTagField( fieldKey, fieldSchema = [] ) {
	if ( ! fieldKey ) {
		return null;
	}
	const tagKey = `${ fieldKey }Tag`;
	return (
		( fieldSchema || [] ).find(
			( field ) => field?.key === tagKey && field?.type === 'tag'
		) || null
	);
}

/**
 * Tag fields folded into a parent content row (hidden as standalone).
 *
 * @param {object} field
 * @param {Array<object>} fieldSchema
 * @return {boolean}
 */
export function isFoldedCompanionTag( field, fieldSchema = [] ) {
	if ( field?.type !== 'tag' || ! field?.key || ! /Tag$/i.test( field.key ) ) {
		return false;
	}
	const baseKey = field.key.replace( /Tag$/i, '' );
	return ( fieldSchema || [] ).some( ( other ) => other?.key === baseKey );
}

/**
 * @param {object}   props
 * @param {string}   [props.label]
 * @param {string}   props.value
 * @param {Function} props.onChange
 * @param {object}   [props.field]
 */
export default function TagField( { label, value, onChange, field = {} } ) {
	const [ open, setOpen ] = useState( false );
	const options =
		Array.isArray( field.options ) && field.options.length
			? field.options
			: DEFAULT_OPTIONS;
	const current = value || field.default || 'div';
	const display = String( current ).toUpperCase();
	const menuLabel =
		label || field.label || __( 'HTML tag', 'joc-blockora-morph' );

	return (
		<div className="bm-tag-field bm-tag-field--compact">
			<Button
				size="small"
				variant="secondary"
				className="bm-tag-field__toggle"
				aria-expanded={ open }
				aria-label={ sprintf(
					/* translators: %s: current tag, e.g. H2 */
					__( 'HTML tag: %s', 'joc-blockora-morph' ),
					display
				) }
				label={ menuLabel }
				showTooltip
				onClick={ () => setOpen( ( next ) => ! next ) }
			>
				<span className="bm-tag-field__value">{ display }</span>
				<span
					className="dashicons dashicons-arrow-down-alt2"
					aria-hidden="true"
				/>
			</Button>
			{ open ? (
				<Popover
					onClose={ () => setOpen( false ) }
					placement="bottom-end"
					focusOnMount="container"
				>
					<div className="bm-tag-field__popover">
						<div className="bm-tag-field__head">
							<strong>{ menuLabel }</strong>
						</div>
						<div
							className="bm-tag-field__menu"
							role="listbox"
							aria-label={ menuLabel }
						>
							{ options.map( ( opt ) => {
								const optValue = opt.value || opt;
								const optLabel = opt.label || optValue;
								const active = optValue === current;
								return (
									<button
										key={ optValue }
										type="button"
										role="option"
										aria-selected={ active }
										className={
											'bm-tag-field__option' +
											( active ? ' is-active' : '' )
										}
										onClick={ () => {
											onChange(
												optValue ||
													field.default ||
													'div'
											);
											setOpen( false );
										} }
									>
										{ optLabel }
									</button>
								);
							} ) }
						</div>
					</div>
				</Popover>
			) : null }
		</div>
	);
}
