import React, { useMemo, useState } from "react";
import Fuse from "fuse.js";
import { Button, Center, Heading, Icon, Input } from "@chakra-ui/react";
import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
import { Link } from "react-router-dom";
import { AutoSizer, WindowScroller, List } from "react-virtualized";
import prettifyStatisticName from "./PrettifyStatisticName";
const Search = ({ statistics, players }) => {
const [searchTerm, setSearchTerm] = useState("");
const searchEngine = useMemo(() => {
const fullList = statistics
.map((s) => {
return {
type: "statistic",
value: s,
searchTerm: prettifyStatisticName(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]);
const renderRow = ({
index, // Index of row
isScrolling, // The List is currently being scrolled
isVisible, // This row is visible within the List (eg it is not an overscanned row)
key, // Unique key within array of rendered rows
parent, // Reference to the parent List (instance)
style, // Style object to be applied to row (to position it);
// This must be passed through to the rendered row element.
}) => {
const x = searchResults[index];
return (
) : (
)
}
variant="ghost"
my="0.5"
display="block"
textAlign="left"
width="100%"
>
{x.item.searchTerm}
);
};
return (
{({ height, isScrolling, onChildScroll, scrollTop, registerChild }) => (
<>
📈
setSearchTerm(event.target.value)}
/>
>
)}
);
};
export default Search;