import React, { useMemo, useState } from "react";
import Fuse from "fuse.js";
import { Button, Center, Flex, Heading, Icon, Input } from "@chakra-ui/react";
import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
import { Link } from "react-router-dom";
const Search = ({ statistics, players }) => {
const [searchTerm, setSearchTerm] = useState("");
const searchEngine = useMemo(() => {
const fullList = statistics
.map((s) => {
return {
type: "statistic",
value: s,
searchTerm: `${s.type} ${s.name}`,
};
})
.concat(
players.map((p) => {
return {
type: "player",
value: p,
searchTerm: p.name,
};
})
);
return new Fuse(fullList, {
minMatchCharLength: 3,
ignoreLocation: true,
shouldSort: true,
keys: ["searchTerm"],
});
}, [statistics, players]);
const searchResults = useMemo(() => {
return searchEngine.search(`'"${searchTerm}"'`);
}, [searchEngine, searchTerm]);
return (
<>
📈
setSearchTerm(event.target.value)}
/>
{searchResults.map((x, i) => {
return (
) : (
)
}
variant="ghost"
my="0.5"
display="block"
textAlign="left"
width="100%"
>
{x.item.searchTerm}
);
})}
>
);
};
export default Search;