import React, { useEffect, useRef, useState } from "react";

import "./searchbar.css";
import searchicon from "./search_icon.svg";
import { NodeData } from "../../common/graph";

interface SearchBarProps {
    minified: boolean;
    nodeSet: NodeData[];
    onSearch?: (node: NodeData) => void;
    nodeColors: Map<string, string>;
}

function SearchBar({
    minified,
    nodeSet,
    onSearch,
    nodeColors,
}: SearchBarProps) {
    const [isMinified, setMinified] = useState(minified);
    const [width, setWidth] = useState<number>(minified ? 0 : 100);
    const [inputText, setInputText] = useState("");
    const inputField = useRef<HTMLInputElement>();

    const toggleMinified = () => {
        setMinified((prev) => !prev);
    };

    useEffect(() => {
        if (isMinified) {
            setWidth(0);
            setInputText("");
            // inputField.current.value = "";
        } else {
            setWidth(100);
            //inputField.current.focus();
        }
    }, [isMinified]);

    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputText(e.target.value.toLowerCase());
    };

    const filtered = nodeSet
        .filter((el) => {
            if (inputText !== "") {
                return el.name.toLowerCase().includes(inputText);
            }
        })
        .slice(0, 3);

    const handleNodeClick = (node: NodeData) => {
        if (onSearch !== undefined) {
            onSearch(node);
        }
    };

    return (
        <div
            className={"serach-area"}
            style={{ backgroundColor: isMinified ? "" : "white" }}
        >
            <div className={"searchbar"}>
                <div className={"searchbar-icon-div"} onClick={toggleMinified}>
                    <img
                        className={`searchbar-icon ${
                            isMinified ? "searchbar-icon-white" : ""
                        }`}
                        src={searchicon}
                        alt={"Searchbar"}
                    />
                </div>
                <div></div>
                <div
                    className={"searchbar-text"}
                    style={{ width: width + "%" }}
                >
                    {width > 0 && (
                        <form className={"searchbar-form"} action={"#"}>
                            <input
                                ref={inputField}
                                className={"searchbar-input"}
                                type={"search"}
                                placeholder={"Knoten suchen..."}
                                onInput={handleInput}
                                autoFocus={true}
                                //                           onBlur={() => setMinified(true)}
                            ></input>
                        </form>
                    )}
                </div>
            </div>
            <div className={"searchbar-results"}>
                {filtered.map((el) => (
                    <div
                        key={el.name}
                        className={"searchbar-result"}
                        onMouseDown={() => handleNodeClick(el)}
                    >
                        <div
                            className={"searchbar-results-circle"}
                            style={{ backgroundColor: nodeColors.get(el.type) }}
                        ></div>
                        <div>{el.name}</div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default SearchBar;