import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { replaceParams } from '../../shared/lib/router';
import { Icon } from '../../shared/ui/Icon';

const SEARCH_DELAY_MILLISECONDS = 300;
const SEARCH_FIELD_ID = 'lcu-search';

function searchPatch( typedText: string ) {
	const searchText = typedText.trim();

	return { s: searchText === '' ? undefined : searchText, page: undefined };
}

export function LinksSearch( { search }: { search: string } ): JSX.Element {
	const [ typedText, setTypedText ] = useState( search );

	useEffect( () => {
		setTypedText( search );
	}, [ search ] );

	useEffect( () => {
		if ( typedText === search ) {
			return undefined;
		}

		const timer = window.setTimeout( () => {
			replaceParams( searchPatch( typedText ) );
		}, SEARCH_DELAY_MILLISECONDS );

		return () => {
			window.clearTimeout( timer );
		};
	}, [ typedText, search ] );

	return (
		<div className="search">
			<label className="sr" htmlFor={ SEARCH_FIELD_ID }>
				{ __( 'Search links', 'aiplaz-link-checkup' ) }
			</label>
			<Icon name="search" />
			<input
				className="input"
				id={ SEARCH_FIELD_ID }
				type="search"
				placeholder={ __(
					'Search address or text',
					'aiplaz-link-checkup'
				) }
				value={ typedText }
				onChange={ ( event ) => {
					setTypedText( event.target.value );
				} }
			/>
		</div>
	);
}