import { useEffect, useRef } from 'react';

import { Icon } from '../Icon';

interface Props {
    value: string;
    onChange: (value: string) => void;
}

/**
 * Search input with a `/` keyboard shortcut for focus. Ignores the shortcut
 * when the user is already typing into another input or textarea.
 */
export const SearchField = ({ value, onChange }: Props) => {
    const inputRef = useRef<HTMLInputElement | null>(null);

    useEffect(() => {
        const onKey = (e: KeyboardEvent) => {
            if (e.key !== '/') return;
            const target = e.target as HTMLElement | null;
            if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
            e.preventDefault();
            inputRef.current?.focus();
        };
        window.addEventListener('keydown', onKey);
        return () => window.removeEventListener('keydown', onKey);
    }, []);

    const blurInput = () => inputRef.current?.blur();

    return (
        <div className="search">
            <Icon.search />
            <input
                ref={inputRef}
                type="text"
                placeholder="Search games"
                value={value}
                onChange={(e) => onChange(e.target.value)}
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        blurInput();
                    } else if (e.key === 'Escape') {
                        e.preventDefault();
                        onChange('');
                        blurInput();
                    }
                }}
                spellCheck={false}
            />
            {value && (
                <button
                    className="search-clear"
                    type="button"
                    aria-label="Clear search"
                    onClick={() => {
                        onChange('');
                        inputRef.current?.focus();
                    }}
                >
                    <Icon.clearCircle />
                </button>
            )}
            <span className="search-kbd">/</span>
        </div>
    );
};