impress/app/javascript/wardrobe-2020/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";
import { logAndCapture } from "../util";

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

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

const SUGGESTIONS_PLACEMENT_PROPS = {
  inline: {
    borderBottomRadius: "md",
  },
  top: {
    position: "absolute",
    bottom: "100%",
    borderTopRadius: "md",
  },
};

/**
 * 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 = null,
  onChange,
  autoFocus,
  showItemsLabel = false,
  background = null,
  boxShadow = null,
  suggestionsPlacement = "inline",
  ...props
}) {
  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 && firstSearchResultRef.current) {
      firstSearchResultRef.current.focus();
      e.preventDefault();
    }
  };

  const suggestionBgColor = useColorModeValue("white", "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}
              boxShadow="md"
              overflow="auto"
              transition="all 0.4s"
              maxHeight="48"
              width="100%"
              className={cx(
                className,
                css`
                  li {
                    list-style: none;
                  }
                `,
              )}
              {...SUGGESTIONS_PLACEMENT_PROPS[suggestionsPlacement]}
            >
              {children}
              {!children && advancedSearchIsOpen && (
                <Box
                  padding="4"
                  fontSize="sm"
                  fontStyle="italic"
                  textAlign="center"
                >
                  No more filters available!
                </Box>
              )}
            </Box>
          )}
        </ClassNames>
      );
    },
    [advancedSearchIsOpen, suggestionsPlacement],
  );

  // 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 (
    <Box position="relative" {...props}>
      <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 }) => {
          onChange({
            ...query,
            // If the suggestion was from typing, remove the last word of the
            // query value. Or, if it was from Advanced Search, leave it alone!
            value: advancedSearchIsOpen
              ? query.value
              : removeLastWord(query.value),
            filterToZoneLabel: suggestion.zoneLabel || query.filterToZoneLabel,
            filterToItemKind: suggestion.itemKind || query.filterToItemKind,
            filterToCurrentUserOwnsOrWants:
              suggestion.userOwnsOrWants ||
              query.filterToCurrentUserOwnsOrWants,
          });
        }}
        getSuggestionValue={(zl) => zl}
        alwaysRenderSuggestions={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 all items…",
          focusBorderColor: focusBorderColor,
          value: query.value || "",
          ref: searchQueryRef,
          minWidth: 0,
          "data-test-id": "item-search-input",
          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(emptySearchQuery);
              e.target.blur();
            } else if (e.key === "Enter") {
              // Pressing Enter doesn't actually submit because it's all on
              // debounce, but it can be a declaration that the query is done, so
              // filter suggestions should go away!
              if (suggestions.length > 0) {
                setSuggestions([]);
                return;
              }
            } 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,
              });
            }
          },
        }}
      />
    </Box>
  );
}

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";
  }
}

/**
 * removeLastWord returns a copy of the text, with the last word and any
 * preceding space removed.
 */
function removeLastWord(text) {
  // This regex matches the full text, and assigns the last word and any
  // preceding text to subgroup 2, and all preceding text to subgroup 1. If
  // there's no last word, we'll still match, and the full string will be in
  // subgroup 1, including any space - no changes made!
  const match = text.match(/^(.*?)(\s*\S+)?$/);
  if (!match) {
    logAndCapture(
      new Error(
        `Assertion failure: pattern should match any input text, ` +
          `but failed to match ${JSON.stringify(text)}`,
      ),
    );
    return text;
  }

  return match[1];
}

export default SearchToolbar;