import { jsx as _jsx } from "react/jsx-runtime";
import { Input } from "../../../input";
import { InputMask } from "../../../input/inputMask";
import { useDebouncedCallback } from "@orderly.network/hooks";
import { Search } from "lucide-react";
export var MoveDirection;
(function(MoveDirection) {
    MoveDirection[MoveDirection["Up"] = 0] = "Up";
    MoveDirection[MoveDirection["Down"] = 1] = "Down";
})(MoveDirection || (MoveDirection = {}));
export const SearchForm = (props)=>{
    const onMoving = (direction, e)=>{
        props.onMoving?.(direction);
        e.preventDefault();
    };
    const handleKeyDown = (e)=>{
        const { keyCode } = e;
        if (keyCode === 40) {
            // console.log("down")
            onMoving?.(1, e);
        } else if (keyCode === 38) {
            // console.log("up")
            onMoving?.(0, e);
        } else if (keyCode === 13) {
            // console.log("enter")
            // onMoving?.(MoveDirection.Up, e);
            props.onSymbolSelect?.();
        }
    };
    const onChange = useDebouncedCallback((e)=>{
        // console.log(e.target.value);
        props.onSearch(e.target.value);
    }, 200);
    // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // }
    return /*#__PURE__*/ _jsx(Input, {
        placeholder: "Search",
        onKeyDown: handleKeyDown,
        onChange: onChange,
        autoFocus: true,
        // value={props.keyword}
        prefix: /*#__PURE__*/ _jsx(InputMask, {
            children: /*#__PURE__*/ _jsx(Search, {
                size: 20,
                className: "orderly-text-base-contrast-20"
            })
        })
    });
};

//# sourceMappingURL=search.js.map