grungnet/src/components/token/TokenTiles.js

import React from "react";
import { Flex, Box, Text, IconButton, Close, Label } from "theme-ui";
import SimpleBar from "simplebar-react";
import Case from "case";

import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
import GroupIcon from "../../icons/GroupIcon";
import TokenHideIcon from "../../icons/TokenHideIcon";
import TokenShowIcon from "../../icons/TokenShowIcon";

import TokenTile from "./TokenTile";
import Link from "../Link";
import FilterBar from "../FilterBar";

import { useDatabase } from "../../contexts/DatabaseContext";

import useResponsiveLayout from "../../hooks/useResponsiveLayout";

function TokenTiles({
  tokens,
  groups,
  onTokenAdd,
  onTokenEdit,
  onTokenSelect,
  selectedTokens,
  onTokensRemove,
  selectMode,
  onSelectModeChange,
  search,
  onSearchChange,
  onTokensGroup,
  onTokensHide,
}) {
  const { databaseStatus } = useDatabase();
  const layout = useResponsiveLayout();

  let hasSelectedDefaultToken = selectedTokens.some(
    (token) => token.type === "default"
  );
  let allTokensVisible = selectedTokens.every((token) => !token.hideInSidebar);

  function tokenToTile(token) {
    const isSelected = selectedTokens.includes(token);
    return (
      <TokenTile
        key={token.id}
        token={token}
        isSelected={isSelected}
        onTokenSelect={onTokenSelect}
        onTokenEdit={onTokenEdit}
        size={layout.tileSize}
        canEdit={
          isSelected &&
          token.type !== "default" &&
          selectMode === "single" &&
          selectedTokens.length === 1
        }
        badges={[`${token.defaultSize}x`]}
      />
    );
  }

  const multipleSelected = selectedTokens.length > 1;

  let hideTitle = "";
  if (multipleSelected) {
    if (allTokensVisible) {
      hideTitle = "Hide Tokens in Sidebar";
    } else {
      hideTitle = "Show Tokens in Sidebar";
    }
  } else {
    if (allTokensVisible) {
      hideTitle = "Hide Token in Sidebar";
    } else {
      hideTitle = "Show Token in Sidebar";
    }
  }

  return (
    <Box sx={{ position: "relative" }}>
      <FilterBar
        onFocus={() => onTokenSelect()}
        search={search}
        onSearchChange={onSearchChange}
        selectMode={selectMode}
        onSelectModeChange={onSelectModeChange}
        onAdd={onTokenAdd}
        addTitle="Add Token"
      />
      <SimpleBar
        style={{ height: layout.screenSize === "large" ? "600px" : "400px" }}
      >
        <Flex
          p={2}
          pb={4}
          pt={databaseStatus === "disabled" ? 4 : 2}
          bg="muted"
          sx={{
            flexWrap: "wrap",
            borderRadius: "4px",
            minHeight: layout.screenSize === "large" ? "600px" : "400px",
            alignContent: "flex-start",
          }}
          onClick={() => onTokenSelect()}
        >
          {groups.map((group) => (
            <React.Fragment key={group}>
              <Label mx={1} mt={2}>
                {Case.capital(group)}
              </Label>
              {tokens[group].map(tokenToTile)}
            </React.Fragment>
          ))}
        </Flex>
      </SimpleBar>
      {databaseStatus === "disabled" && (
        <Box
          sx={{
            position: "absolute",
            top: "39px",
            left: 0,
            right: 0,
            textAlign: "center",
            borderRadius: "2px",
          }}
          bg="highlight"
          p={1}
        >
          <Text as="p" variant="body2">
            Token saving is unavailable. See <Link to="/faq#saving">FAQ</Link>{" "}
            for more information.
          </Text>
        </Box>
      )}
      {selectedTokens.length > 0 && (
        <Flex
          sx={{
            position: "absolute",
            bottom: 0,
            left: 0,
            right: 0,
            justifyContent: "space-between",
          }}
          bg="overlay"
        >
          <Close
            title="Clear Selection"
            aria-label="Clear Selection"
            onClick={() => onTokenSelect()}
          />
          <Flex>
            <IconButton
              aria-label={hideTitle}
              title={hideTitle}
              disabled={hasSelectedDefaultToken}
              onClick={() => onTokensHide(allTokensVisible)}
            >
              {allTokensVisible ? <TokenShowIcon /> : <TokenHideIcon />}
            </IconButton>
            <IconButton
              aria-label={multipleSelected ? "Group Tokens" : "Group Token"}
              title={multipleSelected ? "Group Tokens" : "Group Token"}
              onClick={() => onTokensGroup()}
              disabled={hasSelectedDefaultToken}
            >
              <GroupIcon />
            </IconButton>
            <IconButton
              aria-label={multipleSelected ? "Remove Tokens" : "Remove Token"}
              title={multipleSelected ? "Remove Tokens" : "Remove Token"}
              onClick={() => onTokensRemove()}
              disabled={hasSelectedDefaultToken}
            >
              <RemoveTokenIcon />
            </IconButton>
          </Flex>
        </Flex>
      )}
    </Box>
  );
}

export default TokenTiles;