/**
 * Link field — custom URL / label / new-tab editor (no WordPress LinkControl).
 */
import { Button, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { normalizeLink } from '../../interpolate';
import { endPreviewContentEditForLinkEditor } from '../../shared/previewContentEdit';
import LinkEditorForm from './LinkEditorForm';
/**
 * @param {object}   props
 * @param {string}   props.label
 * @param {object}   props.value
 * @param {Function} props.onChange
 */
export default function LinkField( { label, value, onChange } ) {
	const link = normalizeLink( value || {} );
	const [ open, setOpen ] = useState( false );
	const hasLink = Boolean( link.url );

	const openEditor = () => {
		endPreviewContentEditForLinkEditor();
		setOpen( ( v ) => ! v );
	};

	return (
		<div className="bm-field bm-link-field">
			{ label ? <span className="bm-field-label">{ label }</span> : null }
			{ hasLink ? (
				<div className="bm-link-field__preview">
					<span
						className="bm-link-field__icon dashicons dashicons-admin-links"
						aria-hidden="true"
					/>
					<div className="bm-link-field__meta">
						<strong className="bm-link-field__title">
							{ link.title ||
								__( '(no title)', 'joc-blockora-morph' ) }
						</strong>
						<span className="bm-link-field__url">{ link.url }</span>
						{ link.opensInNewTab ? (
							<span className="bm-link-field__badge">
								{ __( 'New tab', 'joc-blockora-morph' ) }
							</span>
						) : null }
					</div>
					<div className="bm-link-field__actions">
						<Button
							variant="secondary"
							size="small"
							className="bm-link-field__edit"
							icon="edit"
							onClick={ openEditor }
						>
							{ __( 'Edit', 'joc-blockora-morph' ) }
						</Button>
						<Button
							variant="tertiary"
							isDestructive
							size="small"
							className="bm-link-field__clear"
							icon="no-alt"
							label={ __( 'Clear link', 'joc-blockora-morph' ) }
							onClick={ () => {
								setOpen( false );
								onChange(
									normalizeLink( {
										title: '',
										url: '',
										opensInNewTab: false,
									} )
								);
							} }
						/>
					</div>
				</div>
			) : (
				<Button
					variant="secondary"
					className="bm-link-field__add"
					icon="plus-alt2"
					onClick={ () => {
						endPreviewContentEditForLinkEditor();
						setOpen( true );
					} }
				>
					{ __( 'Add link', 'joc-blockora-morph' ) }
				</Button>
			) }
			{ open ? (
				<Popover
					onClose={ () => setOpen( false ) }
					placement="bottom-start"
				>
					<div className="bm-link-field__popover">
						<LinkEditorForm
							value={ link }
							onChange={ onChange }
							onDone={ () => setOpen( false ) }
							onRemove={
								hasLink
									? () => {
											setOpen( false );
											onChange(
												normalizeLink( {
													title: '',
													url: '',
													opensInNewTab: false,
												} )
											);
									  }
									: undefined
							}
						/>
					</div>
				</Popover>
			) : null }
		</div>
	);
}
