impress-2020/src/app/WardrobePage/SearchToolbar.js

import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import {
  Box,
  IconButton,
  Input,
  InputGroup,
  InputLeftAddon,
  InputLeftElement,
  InputRightElement,
  Tooltip,
  useColorModeValue,
} from "@chakra-ui/react";
import {
  ChevronDownIcon,
  ChevronUpIcon,
  CloseIcon,
  SearchIcon,
} from "@chakra-ui/icons";
import { ClassNames } from "@emotion/react";
import Autosuggest from "react-autosuggest";

import useCurrentUser from "../components/useCurrentUser";

export const emptySearchQuery = {
  value: "",
  filterToZoneLabel: null,
  filterToItemKind: null,
  filterToCurrentUserOwnsOrWants: null,
};

export function searchQueryIsEmpty(query) {
  return Object.values(query).every((value) => !value);
}

/**
 * SearchToolbar is rendered above both the ItemsPanel and the SearchPanel,
 * and contains the search field where the user types their query.
 *
 * It has some subtle keyboard interaction support, like DownArrow to go to the
 * first search result, and Escape to clear the search and go back to the
 * ItemsPanel. (The SearchPanel can also send focus back to here, with Escape
 * from anywhere, or UpArrow from the first result!)
 */
function SearchToolbar({
  query,
  searchQueryRef,
  firstSearchResultRef,
  onChange,
  autoFocus,
  showItemsLabel = false,
  background = null,
  boxShadow = null,
}) {
  const [suggestions, setSuggestions] = React.useState([]);
  const [advancedSearchIsOpen, setAdvancedSearchIsOpen] = React.useState(false);
  const { isLoggedIn } = useCurrentUser();

  // NOTE: This query should always load ~instantly, from the client cache.
  const { data } = useQuery(gql`
    query SearchToolbarZones {
      allZones {
        id
        label
        depth
        isCommonlyUsedByItems
      }
    }
  `);
  const zones = data?.allZones || [];
  const itemZones = zones.filter((z) => z.isCommonlyUsedByItems);

  let zoneLabels = itemZones.map((z) => z.label);
  zoneLabels = [...new Set(zoneLabels)];
  zoneLabels.sort();

  const onMoveFocusDownToResults = (e) => {
    if (firstSearchResultRef.current) {
      firstSearchResultRef.current.focus();
      e.preventDefault();
    }
  };

  const suggestionBgColor = useColorModeValue("transparent", "whiteAlpha.100");
  const highlightedBgColor = useColorModeValue("gray.100", "whiteAlpha.300");

  const renderSuggestion = React.useCallback(
    ({ text }, { isHighlighted }) => (
      <Box
        fontWeight={isHighlighted ? "bold" : "normal"}
        background={isHighlighted ? highlightedBgColor : suggestionBgColor}
        padding="2"
        paddingLeft="2.5rem"
        fontSize="sm"
      >
        {text}
      </Box>
    ),
    [suggestionBgColor, highlightedBgColor]
  );

  const renderSuggestionsContainer = React.useCallback(
    ({ containerProps, children }) => {
      const { className, ...otherContainerProps } = containerProps;
      return (
        <ClassNames>
          {({ css, cx }) => (
            <Box
              {...otherContainerProps}
              borderBottomRadius="md"
              boxShadow="md"
              overflow="auto"
              transition="all 0.4s"
              maxHeight="48"
              className={cx(
                className,
                css`
                  li {
                    list-style: none;
                  }
                `
              )}
            >
              {children}
              {!children && advancedSearchIsOpen && (
                <Box
                  padding="4"
                  fontSize="sm"
                  fontStyle="italic"
                  textAlign="center"
                >
                  No more filters available!
                </Box>
              )}
            </Box>
          )}
        </ClassNames>
      );
    },
    [advancedSearchIsOpen]
  );

  // When we change the query filters, clear out the suggestions.
  React.useEffect(() => {
    setSuggestions([]);
  }, [
    query.filterToItemKind,
    query.filterToZoneLabel,
    query.filterToCurrentUserOwnsOrWants,
  ]);

  let queryFilterText = getQueryFilterText(query);
  if (showItemsLabel) {
    queryFilterText = queryFilterText ? (
      <>
        <Box as="span" fontWeight="600">
          Items:
        </Box>{" "}
        {queryFilterText}
      </>
    ) : (
      <Box as="span" fontWeight="600">
        Items
      </Box>
    );
  }

  const allSuggestions = getSuggestions(null, query, zoneLabels, isLoggedIn, {
    showAll: true,
  });

  // Once you remove the final suggestion available, close Advanced Search. We
  // have placeholder text available, sure, but this feels more natural!
  React.useEffect(() => {
    if (allSuggestions.length === 0) {
      setAdvancedSearchIsOpen(false);
    }
  }, [allSuggestions.length]);

  const focusBorderColor = useColorModeValue("green.600", "green.400");

  return (
    <Autosuggest
      suggestions={advancedSearchIsOpen ? allSuggestions : suggestions}
      onSuggestionsFetchRequested={({ value }) => {
        // HACK: I'm not sure why, but apparently this gets called with value
        //       set to the _chosen suggestion_ after choosing it? Has that
        //       always happened? Idk? Let's just, gate around it, I guess?
        if (typeof value === "string") {
          setSuggestions(getSuggestions(value, query, zoneLabels, isLoggedIn));
        }
      }}
      onSuggestionSelected={(e, { suggestion }) => {
        const valueWithoutLastWord = query.value
          ? query.value.match(/^(.*?)\s*\S+$/)[1]
          : query.value;
        onChange({
          ...query,
          value: valueWithoutLastWord,
          filterToZoneLabel: suggestion.zoneLabel || query.filterToZoneLabel,
          filterToItemKind: suggestion.itemKind || query.filterToItemKind,
          filterToCurrentUserOwnsOrWants:
            suggestion.userOwnsOrWants || query.filterToCurrentUserOwnsOrWants,
        });
      }}
      getSuggestionValue={(zl) => zl}
      alwaysRenderSuggestions={true}
      highlightFirstSuggestion={true}
      renderSuggestion={renderSuggestion}
      renderSuggestionsContainer={renderSuggestionsContainer}
      renderInputComponent={(inputProps) => (
        <InputGroup boxShadow={boxShadow} borderRadius="md">
          {queryFilterText ? (
            <InputLeftAddon>
              <SearchIcon color="gray.400" marginRight="3" />
              <Box fontSize="sm">{queryFilterText}</Box>
            </InputLeftAddon>
          ) : (
            <InputLeftElement>
              <SearchIcon color="gray.400" />
            </InputLeftElement>
          )}
          <Input
            background={background}
            autoFocus={autoFocus}
            {...inputProps}
          />
          <InputRightElement
            width="auto"
            justifyContent="flex-end"
            paddingRight="2px"
            paddingY="2px"
          >
            {!searchQueryIsEmpty(query) && (
              <Tooltip label="Clear">
                <IconButton
                  icon={<CloseIcon fontSize="0.6em" />}
                  color="gray.400"
                  variant="ghost"
                  height="100%"
                  marginLeft="1"
                  aria-label="Clear search"
                  onClick={() => {
                    setSuggestions([]);
                    onChange(emptySearchQuery);
                  }}
                />
              </Tooltip>
            )}
            <Tooltip label="Advanced search">
              <IconButton
                icon={
                  advancedSearchIsOpen ? (
                    <ChevronUpIcon fontSize="1.5em" />
                  ) : (
                    <ChevronDownIcon fontSize="1.5em" />
                  )
                }
                color="gray.400"
                variant="ghost"
                height="100%"
                aria-label="Open advanced search"
                onClick={() => setAdvancedSearchIsOpen((isOpen) => !isOpen)}
              />
            </Tooltip>
          </InputRightElement>
        </InputGroup>
      )}
      inputProps={{
        // placeholder: "Search for items to add…",
        "aria-label": "Search for items to add…",
        focusBorderColor: focusBorderColor,
        value: query.value || "",
        ref: searchQueryRef,
        minWidth: 0,
        onChange: (e, { newValue, method }) => {
          // The Autosuggest tries to change the _entire_ value of the element
          // when navigating suggestions, which isn't actually what we want.
          // Only accept value changes that are typed by the user!
          if (method === "type") {
            onChange({ ...query, value: newValue });
          }
        },
        onKeyDown: (e) => {
          if (e.key === "Escape") {
            if (suggestions.length > 0) {
              setSuggestions([]);
              return;
            }
            onChange(null);
            e.target.blur();
          } else if (e.key === "ArrowDown") {
            if (suggestions.length > 0) {
              return;
            }
            onMoveFocusDownToResults(e);
          } else if (e.key === "Backspace" && e.target.selectionStart === 0) {
            onChange({
              ...query,
              filterToItemKind: null,
              filterToZoneLabel: null,
              filterToCurrentUserOwnsOrWants: null,
            });
          }
        },
      }}
    />
  );
}

function getSuggestions(
  value,
  query,
  zoneLabels,
  isLoggedIn,
  { showAll = false } = {}
) {
  if (!value && !showAll) {
    return [];
  }

  const words = (value || "").split(/\s+/);
  const lastWord = words[words.length - 1];
  if (lastWord.length < 2 && !showAll) {
    return [];
  }

  const suggestions = [];

  if (query.filterToItemKind == null) {
    if (
      wordMatches("NC", lastWord) ||
      wordMatches("Neocash", lastWord) ||
      showAll
    ) {
      suggestions.push({ itemKind: "NC", text: "Neocash items" });
    }

    if (
      wordMatches("NP", lastWord) ||
      wordMatches("Neopoints", lastWord) ||
      showAll
    ) {
      suggestions.push({ itemKind: "NP", text: "Neopoint items" });
    }

    if (
      wordMatches("PB", lastWord) ||
      wordMatches("Paintbrush", lastWord) ||
      showAll
    ) {
      suggestions.push({ itemKind: "PB", text: "Paintbrush items" });
    }
  }

  if (isLoggedIn && query.filterToCurrentUserOwnsOrWants == null) {
    if (wordMatches("Items you own", lastWord) || showAll) {
      suggestions.push({ userOwnsOrWants: "OWNS", text: "Items you own" });
    }

    if (wordMatches("Items you want", lastWord) || showAll) {
      suggestions.push({ userOwnsOrWants: "WANTS", text: "Items you want" });
    }
  }

  if (query.filterToZoneLabel == null) {
    for (const zoneLabel of zoneLabels) {
      if (wordMatches(zoneLabel, lastWord) || showAll) {
        suggestions.push({ zoneLabel, text: `Zone: ${zoneLabel}` });
      }
    }
  }

  return suggestions;
}

function wordMatches(target, word) {
  return target.toLowerCase().includes(word.toLowerCase());
}

function getQueryFilterText(query) {
  const textWords = [];

  if (query.filterToItemKind) {
    textWords.push(query.filterToItemKind);
  }

  if (query.filterToZoneLabel) {
    textWords.push(pluralizeZoneLabel(query.filterToZoneLabel));
  }

  if (query.filterToCurrentUserOwnsOrWants === "OWNS") {
    if (!query.filterToItemKind && !query.filterToZoneLabel) {
      textWords.push("Items");
    } else if (query.filterToItemKind && !query.filterToZoneLabel) {
      textWords.push("items");
    }
    textWords.push("you own");
  } else if (query.filterToCurrentUserOwnsOrWants === "WANTS") {
    if (!query.filterToItemKind && !query.filterToZoneLabel) {
      textWords.push("Items");
    } else if (query.filterToItemKind && !query.filterToZoneLabel) {
      textWords.push("items");
    }
    textWords.push("you want");
  }

  return textWords.join(" ");
}

/**
 * pluralizeZoneLabel hackily tries to convert a zone name to a plural noun!
 *
 * HACK: It'd be more reliable and more translatable to do this by just
 *       manually creating the plural for each zone. But, ehh! ¯\_ (ツ)_/¯
 */
function pluralizeZoneLabel(zoneLabel) {
  if (zoneLabel.endsWith("ss")) {
    return zoneLabel + "es";
  } else if (zoneLabel.endsWith("s")) {
    return zoneLabel;
  } else {
    return zoneLabel + "s";
  }
}

export default SearchToolbar;