impress/src/app/WardrobePage/support/AllItemLayersSupportModal.js

import React from "react";
import {
  Box,
  Button,
  Flex,
  Heading,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Tooltip,
  Wrap,
  WrapItem,
} from "@chakra-ui/react";
import { gql, useQuery } from "@apollo/client";
import {
  appearanceLayerFragment,
  itemAppearanceFragment,
  petAppearanceFragment,
} from "../../components/useOutfitAppearance";
import HangerSpinner from "../../components/HangerSpinner";
import { ErrorMessage, useCommonStyles } from "../../util";
import ItemSupportAppearanceLayer from "./ItemSupportAppearanceLayer";
import { EditIcon } from "@chakra-ui/icons";

function AllItemLayersSupportModal({ item, isOpen, onClose }) {
  const [bulkAddProposal, setBulkAddProposal] = React.useState(null);

  const { bodyBackground } = useCommonStyles();

  return (
    <Modal size="4xl" isOpen={isOpen} onClose={onClose}>
      <ModalOverlay>
        <ModalContent background={bodyBackground}>
          <ModalHeader as="h1" paddingBottom="2">
            <Box as="span" fontWeight="700">
              Layers on all pets:
            </Box>{" "}
            <Box as="span" fontWeight="normal">
              {item.name}
            </Box>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody paddingBottom="12">
            <BulkAddBodySpecificAssetsForm
              bulkAddProposal={bulkAddProposal}
              onSubmit={setBulkAddProposal}
            />
            <Box height="8" />
            <AllItemLayersSupportModalContent
              item={item}
              bulkAddProposal={bulkAddProposal}
            />
          </ModalBody>
        </ModalContent>
      </ModalOverlay>
    </Modal>
  );
}

function BulkAddBodySpecificAssetsForm({ bulkAddProposal, onSubmit }) {
  const [minAssetId, setMinAssetId] = React.useState(
    bulkAddProposal?.minAssetId
  );

  return (
    <Flex
      align="center"
      as="form"
      fontSize="sm"
      opacity="0.9"
      transition="0.2s all"
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit({ minAssetId });
      }}
    >
      <Tooltip
        label={
          <Box textAlign="center" fontSize="xs">
            <Box as="p" marginBottom="1em">
              When an item accidentally gets assigned to fit all bodies, this
              tool can help you recover the original appearances, by assuming
              the layer IDs are assigned to each species in alphabetical order.
            </Box>
            <Box as="p">
              This will only find layers that have already been modeled!
            </Box>
          </Box>
        }
      >
        <Flex align="center" tabIndex="0">
          <EditIcon marginRight="1" />
          <Box>Bulk-add body-specific assets:</Box>
        </Flex>
      </Tooltip>
      <Box width="2" />
      <Input
        type="number"
        min="1"
        step="1"
        size="xs"
        width="9ch"
        placeholder="Min ID"
        value={minAssetId || ""}
        onChange={(e) => setMinAssetId(e.target.value || null)}
      />
      <Box width="1" />
      <Box>–</Box>
      <Box width="1" />
      <Input
        type="number"
        min="55"
        step="1"
        size="xs"
        width="9ch"
        placeholder="Max ID"
        // There are 55 species at time of writing, so offsetting the max ID
        // by 54 gives us ranges like 1–55, one for each species.
        value={minAssetId != null ? Number(minAssetId) + 54 : ""}
        onChange={(e) =>
          setMinAssetId(e.target.value ? Number(e.target.value) - 54 : null)
        }
      />
      <Box width="2" />
      <Button type="submit" size="xs" isDisabled={minAssetId == null}>
        Preview
      </Button>
    </Flex>
  );
}

function AllItemLayersSupportModalContent({ item, bulkAddProposal }) {
  const { loading, error, data } = useQuery(
    gql`
      query AllItemLayersSupportModal($itemId: ID!) {
        item(id: $itemId) {
          id
          allAppearances {
            id
            body {
              id
              representsAllBodies
              canonicalAppearance {
                id
                species {
                  id
                  name
                }
                color {
                  id
                  name
                  isStandard
                }
                pose
                ...PetAppearanceForOutfitPreview
              }
            }
            ...ItemAppearanceForOutfitPreview
          }
        }
      }

      ${itemAppearanceFragment}
      ${petAppearanceFragment}
    `,
    { variables: { itemId: item.id } }
  );

  const {
    loading: loading2,
    error: error2,
    data: bulkAddProposalData,
  } = useQuery(
    gql`
      query AllItemLayersSupportModal_BulkAddProposal($layerRemoteIds: [ID!]!) {
        layersToAdd: itemAppearanceLayersByRemoteId(
          remoteIds: $layerRemoteIds
        ) {
          id
          ...AppearanceLayerForOutfitPreview
        }

        allSpecies {
          id
          name
          standardBodyId
          canonicalAppearance {
            id
            species {
              id
              name
            }
            color {
              id
              name
              isStandard
            }
            pose
            ...PetAppearanceForOutfitPreview
          }
        }
      }

      ${appearanceLayerFragment}
      ${petAppearanceFragment}
    `,
    {
      variables: {
        layerRemoteIds: bulkAddProposal
          ? Array.from({ length: 54 }, (_, i) =>
              String(Number(bulkAddProposal.minAssetId) + i)
            )
          : [],
      },
      skip: bulkAddProposal == null,
    }
  );

  if (loading || loading2) {
    return (
      <Flex align="center" justify="center" minHeight="64">
        <HangerSpinner />
      </Flex>
    );
  }

  if (error || error2) {
    return <ErrorMessage>{(error || error2).message}</ErrorMessage>;
  }

  let itemAppearances = data.item?.allAppearances || [];
  itemAppearances = mergeBulkAddProposalIntoItemAppearances(
    itemAppearances,
    bulkAddProposal,
    bulkAddProposalData
  );
  itemAppearances = [...itemAppearances].sort((a, b) => {
    const aKey = getSortKeyForBody(a.body);
    const bKey = getSortKeyForBody(b.body);
    return aKey.localeCompare(bKey);
  });

  return (
    <Wrap justify="center" spacing="4">
      {itemAppearances.map((itemAppearance) => (
        <WrapItem key={itemAppearance.id}>
          <ItemAppearanceCard item={item} itemAppearance={itemAppearance} />
        </WrapItem>
      ))}
    </Wrap>
  );
}

function ItemAppearanceCard({ item, itemAppearance }) {
  const petAppearance = itemAppearance.body.canonicalAppearance;
  const biologyLayers = petAppearance.layers;
  const itemLayers = [...itemAppearance.layers].sort(
    (a, b) => a.zone.depth - b.zone.depth
  );

  const { brightBackground } = useCommonStyles();

  return (
    <Box
      background={brightBackground}
      paddingX="4"
      paddingY="3"
      boxShadow="lg"
      borderRadius="lg"
    >
      <Heading as="h2" size="sm" fontWeight="600">
        {getBodyName(itemAppearance.body)}
      </Heading>
      <Box height="3" />
      <Wrap paddingX="3" spacing="5">
        {itemLayers.length === 0 && (
          <Flex
            minWidth="150px"
            minHeight="150px"
            align="center"
            justify="center"
          >
            <Box fontSize="sm" fontStyle="italic">
              (No data)
            </Box>
          </Flex>
        )}
        {itemLayers.map((itemLayer) => (
          <WrapItem key={itemLayer.id}>
            <ItemSupportAppearanceLayer
              item={item}
              itemLayer={itemLayer}
              biologyLayers={biologyLayers}
              outfitState={{
                speciesId: petAppearance.species.id,
                colorId: petAppearance.color.id,
                pose: petAppearance.pose,
              }}
            />
          </WrapItem>
        ))}
      </Wrap>
    </Box>
  );
}

function getSortKeyForBody(body) {
  // "All bodies" sorts first!
  if (body.representsAllBodies) {
    return "";
  }

  const { color, species } = body.canonicalAppearance;
  // Sort standard colors first, then special colors by name, then by species
  // within each color.
  return `${color.isStandard ? "A" : "Z"}-${color.name}-${species.name}`;
}

function getBodyName(body) {
  if (body.representsAllBodies) {
    return "All bodies";
  }

  const { species, color } = body.canonicalAppearance;
  const speciesName = capitalize(species.name);
  const colorName = color.isStandard ? "Standard" : capitalize(color.name);
  return `${colorName} ${speciesName}`;
}

function capitalize(str) {
  return str[0].toUpperCase() + str.slice(1);
}

function mergeBulkAddProposalIntoItemAppearances(
  itemAppearances,
  bulkAddProposal,
  bulkAddProposalData
) {
  if (!bulkAddProposalData) {
    return itemAppearances;
  }

  // Do a deep copy of the existing item appearances, so we can mutate them as
  // we loop through them in this function!
  const mergedItemAppearances = JSON.parse(JSON.stringify(itemAppearances));

  // Set up the data in convenient formats.
  const { allSpecies, layersToAdd } = bulkAddProposalData;
  const sortedSpecies = [...allSpecies].sort((a, b) =>
    a.name.localeCompare(b.name)
  );
  const layersToAddByRemoteId = {};
  for (const layer of layersToAdd) {
    layersToAddByRemoteId[layer.remoteId] = layer;
  }

  for (const [index, species] of sortedSpecies.entries()) {
    // Find the existing item appearance to add to, or create a new one if it
    // doesn't exist yet.
    let itemAppearance = mergedItemAppearances.find(
      (a) =>
        a.body.canonicalAppearance.species.id === species.id &&
        !a.body.representsAllBodies
    );
    if (!itemAppearance) {
      itemAppearance = {
        id: `bulk-add-proposal-new-item-appearance-for-body-${species.standardBodyId}`,
        layers: [],
        body: {
          id: species.standardBodyId,
          canonicalAppearance: species.canonicalAppearance,
        },
      };
      mergedItemAppearances.push(itemAppearance);
    }

    const layerToAddRemoteId = String(
      Number(bulkAddProposal.minAssetId) + index
    );
    const layerToAdd = layersToAddByRemoteId[layerToAddRemoteId];
    if (!layerToAdd) {
      continue;
    }

    // Delete this layer from other appearances (because we're going to
    // override its body ID), then add it to this new one.
    for (const otherItemAppearance of mergedItemAppearances) {
      const indexToDelete = otherItemAppearance.layers.findIndex(
        (l) => l.remoteId === layerToAddRemoteId
      );
      if (indexToDelete >= 0) {
        otherItemAppearance.layers.splice(indexToDelete, 1);
      }
    }
    itemAppearance.layers.push(layerToAdd);
  }

  return mergedItemAppearances;
}

export default AllItemLayersSupportModal;