import React from "@modules/react";
import Close from "@ui/icons/close";
import SearchIcon from "@ui/icons/search";

const {useState, useEffect, useCallback, useRef} = React;


export default function Search({onChange, className, onKeyDown, placeholder}) {
    const input = useRef(null);
    const [value, setValue] = useState("");

    // focus search bar on page select
    useEffect(()=>{
        if (!input.current) return;
        input.current.focus();
    }, []);

    const change = useCallback((e) => {
        onChange?.(e);
        setValue(e.target.value);
    }, [onChange]);

    const reset = useCallback(() => {
        onChange?.({target: {value: ""}});
        setValue("");
    }, [onChange]);

    return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
                <input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
                {!value && <SearchIcon />}
                {value && <button className="bd-button" onClick={reset}><Close size="16px" /></button>}
            </div>;

}