impress/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js

import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import { ClassNames } from "@emotion/react";
import {
  Box,
  Button,
  Flex,
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverTrigger,
  Portal,
  Tab,
  Tabs,
  TabList,
  TabPanel,
  TabPanels,
  VisuallyHidden,
  useBreakpointValue,
  useColorModeValue,
  useTheme,
  useToast,
  useToken,
} from "@chakra-ui/react";
import { ChevronDownIcon, WarningTwoIcon } from "@chakra-ui/icons";
import { loadable } from "../util";

import { petAppearanceFragment } from "../components/useOutfitAppearance";
import getVisibleLayers from "../components/getVisibleLayers";
import { OutfitLayers } from "../components/OutfitPreview";
import SupportOnly from "./support/SupportOnly";
import { useAltStylesForSpecies } from "../loaders/alt-styles";
import { useLocalStorage } from "../util";

// From https://twemoji.twitter.com/, thank you!
import twemojiSmile from "../images/twemoji/smile.svg";
import twemojiCry from "../images/twemoji/cry.svg";
import twemojiSick from "../images/twemoji/sick.svg";
import twemojiSunglasses from "../images/twemoji/sunglasses.svg";
import twemojiQuestion from "../images/twemoji/question.svg";
import twemojiMasc from "../images/twemoji/masc.svg";
import twemojiFem from "../images/twemoji/fem.svg";
import twemojiHourglass from "../images/twemoji/hourglass.svg";

const PosePickerSupport = loadable(() => import("./support/PosePickerSupport"));

const PosePickerSupportSwitch = loadable(() =>
  import("./support/PosePickerSupport").then((m) => m.PosePickerSupportSwitch),
);

/**
 * PosePicker shows the pet poses available on the current species/color, and
 * lets the user choose which want they want!
 *
 * NOTE: This component is memoized with React.memo. It's relatively expensive
 *       to re-render on every outfit change - the contents update even if the
 *       popover is closed! This makes wearing/unwearing items noticeably
 *       slower on lower-power devices.
 *
 *       So, instead of using `outfitState` like most components, we specify
 *       exactly which props we need, so that `React.memo` can see the changes
 *       that matter, and skip updates that don't.
 */
function PosePicker({
  speciesId,
  colorId,
  pose,
  altStyleId,
  appearanceId,
  dispatchToOutfit,
  onLockFocus,
  onUnlockFocus,
  ...props
}) {
  const initialFocusRef = React.useRef();
  const posesQuery = usePoses(speciesId, colorId, pose);
  const altStylesQuery = useAltStylesForSpecies(speciesId);
  const [isInSupportMode, setIsInSupportMode] = useLocalStorage(
    "DTIPosePickerIsInSupportMode",
    false,
  );
  const toast = useToast();

  const loading = posesQuery.loading || altStylesQuery.isLoading;
  const error = posesQuery.error ?? altStylesQuery.error;
  const poseInfos = posesQuery.poseInfos;
  const altStyles = altStylesQuery.data ?? [];

  const [isOpen, setIsOpen] = React.useState(false);
  const [tabIndex, setTabIndex] = React.useState(0);

  const altStyle = altStyles.find((s) => s.id === altStyleId);

  const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });

  React.useEffect(() => {
    // While the popover is open, don't change which tab is open.
    if (isOpen) {
      return;
    }

    // Otherwise, set the tab to Styles if we're wearing an Alt Style, or
    // Expressions if we're not.
    setTabIndex(altStyle != null ? 1 : 0);
  }, [altStyle, isOpen]);

  // Resize the Popover when we toggle support mode, because it probably will
  // affect the content size.
  React.useLayoutEffect(() => {
    // HACK: To trigger a Popover resize, we simulate a window resize event,
    //       because Popover listens for window resizes to reposition itself.
    //       I've also filed an issue requesting an official API!
    //       https://github.com/chakra-ui/chakra-ui/issues/1853
    window.dispatchEvent(new Event("resize"));
  }, [isInSupportMode]);

  // Generally, the app tries to never put us in an invalid pose state. But it
  // can happen with direct URL navigation, or pet loading when modeling isn't
  // updated! Let's do some recovery.
  const selectedPoseIsAvailable = Object.values(poseInfos).some(
    (pi) => pi.isSelected && pi.isAvailable,
  );
  const firstAvailablePose = Object.values(poseInfos).find(
    (pi) => pi.isAvailable,
  )?.pose;
  React.useEffect(() => {
    if (loading) {
      return;
    }

    if (!selectedPoseIsAvailable) {
      if (!firstAvailablePose) {
        // TODO: I suppose this error would fit better in SpeciesColorPicker!
        toast({
          status: "error",
          title: "Oops, we don't have data for this pet color!",
          description:
            "If it's new, this might be a modeling issue—try modeling it on " +
            "Classic DTI first. Sorry!",
          duration: null,
          isClosable: true,
        });
        return;
      }

      console.warn(
        `Pose ${pose} not found for speciesId=${speciesId}, ` +
          `colorId=${colorId}. Redirecting to pose ${firstAvailablePose}.`,
      );
      dispatchToOutfit({ type: "setPose", pose: firstAvailablePose });
    }
  }, [
    loading,
    selectedPoseIsAvailable,
    firstAvailablePose,
    speciesId,
    colorId,
    pose,
    toast,
    dispatchToOutfit,
  ]);

  // This is a low-stakes enough control, where enough pairs don't have data
  // anyway, that I think I want to just not draw attention to failures.
  if (error) {
    return null;
  }

  const numStandardPoses = Object.values(poseInfos).filter(
    (p) => p.isAvailable && STANDARD_POSES.includes(p.pose),
  ).length;

  const onChangePose = (e) => {
    dispatchToOutfit({ type: "setPose", pose: e.target.value });
  };

  const onChangeStyle = (altStyleId) => {
    dispatchToOutfit({ type: "setStyle", altStyleId });
  };

  return (
    <Popover
      placement={placement}
      returnFocusOnClose
      onOpen={() => {
        setIsOpen(true);
        onLockFocus();
      }}
      onClose={() => {
        setIsOpen(false);
        onUnlockFocus();
      }}
      initialFocusRef={initialFocusRef}
      isLazy
      lazyBehavior="keepMounted"
    >
      {() => (
        <>
          <PopoverTrigger>
            <PosePickerButton
              pose={pose}
              altStyle={altStyle}
              isOpen={isOpen}
              loading={loading}
              {...props}
            />
          </PopoverTrigger>
          <Portal>
            <PopoverContent>
              <Tabs
                size="sm"
                variant="soft-rounded"
                display="flex"
                flexDirection={{ base: "column", md: "column-reverse" }}
                paddingY="2"
                gap="2"
                index={tabIndex}
                onChange={setTabIndex}
              >
                <TabList paddingX="2" paddingY="0">
                  <Tab width="50%">Expressions</Tab>
                  <Tab width="50%">Styles</Tab>
                </TabList>
                <TabPanels position="relative">
                  <TabPanel paddingX="4" paddingY="0">
                    {isInSupportMode ? (
                      <PosePickerSupport
                        speciesId={speciesId}
                        colorId={colorId}
                        pose={pose}
                        appearanceId={appearanceId}
                        initialFocusRef={
                          tabIndex === 0 ? initialFocusRef : null
                        }
                        dispatchToOutfit={dispatchToOutfit}
                      />
                    ) : (
                      <>
                        <PosePickerTable
                          poseInfos={poseInfos}
                          onChange={onChangePose}
                          initialFocusRef={
                            tabIndex === 0 ? initialFocusRef : null
                          }
                        />
                        {numStandardPoses == 0 && (
                          <PosePickerEmptyExplanation />
                        )}
                      </>
                    )}
                    <SupportOnly>
                      <Box position="absolute" top="1" left="3">
                        <PosePickerSupportSwitch
                          isChecked={isInSupportMode}
                          onChange={(e) => setIsInSupportMode(e.target.checked)}
                        />
                      </Box>
                    </SupportOnly>
                  </TabPanel>
                  <TabPanel paddingX="4" paddingY="0">
                    <StyleSelect
                      selectedStyleId={altStyleId}
                      altStyles={altStyles}
                      onChange={onChangeStyle}
                      initialFocusRef={tabIndex === 1 ? initialFocusRef : null}
                    />
                    <StyleExplanation />
                  </TabPanel>
                </TabPanels>
              </Tabs>
              <PopoverArrow />
            </PopoverContent>
          </Portal>
        </>
      )}
    </Popover>
  );
}

const PosePickerButton = React.forwardRef(
  ({ pose, altStyle, isOpen, loading, ...props }, ref) => {
    const theme = useTheme();

    const icon = altStyle != null ? twemojiSunglasses : getIcon(pose);
    const label = altStyle != null ? altStyle.seriesName : getLabel(pose);

    return (
      <ClassNames>
        {({ css, cx }) => (
          <Button
            variant="unstyled"
            textShadow={`${theme.colors.blackAlpha["700"]} 0 1px 2px`}
            d="flex"
            alignItems="center"
            justifyContent="center"
            _focus={{ borderColor: "gray.50" }}
            _hover={{ borderColor: "gray.50" }}
            outline="initial"
            fontSize="sm"
            fontWeight="normal"
            minWidth="12ch"
            disabled={loading}
            className={cx(
              css`
              border: 1px solid transparent !important;
              color: ${theme.colors.gray["100"]};
              cursor: ${loading ? "wait" : "pointer"} !important;
              transition:
                color 0.2s,
                background: 0.2s,
                border-color 0.2s !important;
              padding-left: 0.75em;
              padding-right: 0.5em;

              &:hover,
              &.is-open {
                border-color: ${theme.colors.gray["50"]} !important;
                color: ${theme.colors.gray["50"]};
                background: ${theme.colors.blackAlpha["600"]};
                text-shadow: transparent 0 1px 2px;
              }

              &:focus {
                border-color: ${theme.colors.gray["50"]} !important;
                box-shadow: ${theme.shadows.outline};
              }

              &.is-open {
                border-width: 2px !important;
              }
            `,
              isOpen && "is-open",
            )}
            {...props}
            ref={ref}
          >
            <EmojiImage src={icon} alt="Style" />
            <Box width=".5em" />
            {label}
            <Box width=".5em" />
            <ChevronDownIcon />
          </Button>
        )}
      </ClassNames>
    );
  },
);

function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
  return (
    <Box display="flex" flexDirection="column" alignItems="center">
      <table width="100%">
        <thead>
          <tr>
            <th />
            <Cell as="th">
              <EmojiImage src={twemojiSmile} alt="Happy" />
            </Cell>
            <Cell as="th">
              <EmojiImage src={twemojiCry} alt="Sad" />
            </Cell>
            <Cell as="th">
              <EmojiImage src={twemojiSick} alt="Sick" />
            </Cell>
          </tr>
        </thead>
        <tbody>
          <tr>
            <Cell as="th">
              <EmojiImage src={twemojiMasc} alt="Masculine" />
            </Cell>
            <Cell as="td">
              <PoseOption
                poseInfo={poseInfos.happyMasc}
                onChange={onChange}
                inputRef={poseInfos.happyMasc.isSelected && initialFocusRef}
              />
            </Cell>
            <Cell as="td">
              <PoseOption
                poseInfo={poseInfos.sadMasc}
                onChange={onChange}
                inputRef={poseInfos.sadMasc.isSelected && initialFocusRef}
              />
            </Cell>
            <Cell as="td">
              <PoseOption
                poseInfo={poseInfos.sickMasc}
                onChange={onChange}
                inputRef={poseInfos.sickMasc.isSelected && initialFocusRef}
              />
            </Cell>
          </tr>
          <tr>
            <Cell as="th">
              <EmojiImage src={twemojiFem} alt="Feminine" />
            </Cell>
            <Cell as="td">
              <PoseOption
                poseInfo={poseInfos.happyFem}
                onChange={onChange}
                inputRef={poseInfos.happyFem.isSelected && initialFocusRef}
              />
            </Cell>
            <Cell as="td">
              <PoseOption
                poseInfo={poseInfos.sadFem}
                onChange={onChange}
                inputRef={poseInfos.sadFem.isSelected && initialFocusRef}
              />
            </Cell>
            <Cell as="td">
              <PoseOption
                poseInfo={poseInfos.sickFem}
                onChange={onChange}
                inputRef={poseInfos.sickFem.isSelected && initialFocusRef}
              />
            </Cell>
          </tr>
        </tbody>
      </table>
      {poseInfos.unconverted.isAvailable && (
        <Flex
          align="center"
          justify="center"
          gap="1"
          marginTop="2"
          marginBottom="2"
        >
          <PoseOption
            poseInfo={poseInfos.unconverted}
            onChange={onChange}
            inputRef={poseInfos.unconverted.isSelected && initialFocusRef}
            size="sm"
            label="Retired UC"
          />
          <RetiredUCWarning isSelected={poseInfos.unconverted.isSelected} />
        </Flex>
      )}
    </Box>
  );
}

function Cell({ children, as }) {
  const Tag = as;
  return (
    <Tag>
      <Flex justify="center" p="1">
        {children}
      </Flex>
    </Tag>
  );
}

const EMOTION_STRINGS = {
  HAPPY_MASC: "Happy",
  HAPPY_FEM: "Happy",
  SAD_MASC: "Sad",
  SAD_FEM: "Sad",
  SICK_MASC: "Sick",
  SICK_FEM: "Sick",
};

const GENDER_PRESENTATION_STRINGS = {
  HAPPY_MASC: "Masculine",
  SAD_MASC: "Masculine",
  SICK_MASC: "Masculine",
  HAPPY_FEM: "Feminine",
  SAD_FEM: "Feminine",
  SICK_FEM: "Feminine",
};

const STANDARD_POSES = Object.keys(EMOTION_STRINGS);

function PoseOption({
  poseInfo,
  onChange,
  inputRef,
  size = "md",
  label,
  ...otherProps
}) {
  const theme = useTheme();
  const genderPresentationStr = GENDER_PRESENTATION_STRINGS[poseInfo.pose];
  const emotionStr = EMOTION_STRINGS[poseInfo.pose];

  let poseName =
    poseInfo.pose === "UNCONVERTED"
      ? "Unconverted"
      : `${emotionStr} and ${genderPresentationStr}`;
  if (!poseInfo.isAvailable) {
    poseName += ` (not modeled yet)`;
  }

  const borderColor = useColorModeValue(
    theme.colors.green["600"],
    theme.colors.green["300"],
  );

  return (
    <ClassNames>
      {({ css, cx }) => (
        <Box
          as="label"
          cursor="pointer"
          display="flex"
          alignItems="center"
          borderColor={poseInfo.isSelected ? borderColor : "gray.400"}
          boxShadow={label ? "md" : "none"}
          borderWidth={label ? "1px" : "0"}
          borderRadius={label ? "full" : "0"}
          paddingRight={label ? "3" : "0"}
          onClick={(e) => {
            // HACK: We need the timeout to beat the popover's focus stealing!
            const input = e.currentTarget.querySelector("input");
            setTimeout(() => input.focus(), 0);
          }}
          {...otherProps}
        >
          <VisuallyHidden
            as="input"
            type="radio"
            aria-label={poseName}
            name="pose"
            value={poseInfo.pose}
            checked={poseInfo.isSelected}
            disabled={!poseInfo.isAvailable}
            onChange={onChange}
            ref={inputRef || null}
          />
          <Box
            aria-hidden
            borderRadius="full"
            boxShadow="md"
            overflow="hidden"
            width={size === "sm" ? "30px" : "50px"}
            height={size === "sm" ? "30px" : "50px"}
            title={
              poseInfo.isAvailable
                ? // A lil debug output, so that we can quickly identify glitched
                  // PetStates and manually mark them as glitched!
                  window.location.hostname.includes("localhost") &&
                  `#${poseInfo.id}`
                : "Not modeled yet"
            }
            position="relative"
            className={css`
              transform: scale(0.8);
              opacity: 0.8;
              transition: all 0.2s;

              input:checked + & {
                transform: scale(1);
                opacity: 1;
              }
            `}
          >
            <Box
              borderRadius="full"
              position="absolute"
              top="0"
              bottom="0"
              left="0"
              right="0"
              zIndex="2"
              className={cx(
                css`
                  border: 0px solid ${borderColor};
                  transition: border-width 0.2s;

                  &.not-available {
                    border-color: ${theme.colors.gray["500"]};
                    border-width: 1px;
                  }

                  input:checked + * & {
                    border-width: 1px;
                  }

                  input:focus + * & {
                    border-width: 3px;
                  }
                `,
                !poseInfo.isAvailable && "not-available",
              )}
            />
            {poseInfo.isAvailable ? (
              <Box
                width="100%"
                height="100%"
                transform={getTransform(poseInfo)}
              >
                <OutfitLayers visibleLayers={getVisibleLayers(poseInfo, [])} />
              </Box>
            ) : (
              <Flex align="center" justify="center" width="100%" height="100%">
                <EmojiImage src={twemojiQuestion} boxSize={24} />
              </Flex>
            )}
          </Box>
          {label && (
            <Box
              marginLeft="2"
              fontSize="xs"
              fontWeight={poseInfo.isSelected ? "bold" : "normal"}
            >
              {label}
            </Box>
          )}
        </Box>
      )}
    </ClassNames>
  );
}

function PosePickerEmptyExplanation() {
  return (
    <Box
      fontSize="xs"
      fontStyle="italic"
      textAlign="center"
      opacity="0.7"
      marginTop="2"
    >
      We're still working on labeling these! For now, we're just giving you one
      of the expressions we have.
    </Box>
  );
}

function RetiredUCWarning({ isSelected }) {
  return (
    <Popover placement="right" trigger="hover">
      <PopoverTrigger>
        <Box
          as="button"
          tabIndex="0"
          aria-label="Warning"
          cursor="help"
          lineHeight="1"
          opacity={isSelected ? "1" : "0.75"}
          transform={isSelected ? "scale(1)" : "scale(0.8)"}
          color={isSelected ? "yellow.500" : "inherit"}
          transition="all 0.2s"
          padding="1"
        >
          <WarningTwoIcon />
        </Box>
      </PopoverTrigger>
      <PopoverContent
        background="blackAlpha.800"
        borderColor="blackAlpha.900"
        color="white"
        padding="2"
        fontSize="sm"
      >
        "Unconverted" pets are no longer available on Neopets.com, and have been
        replaced with the very similar Styles feature. We're just keeping this
        as an archive!
      </PopoverContent>
    </Popover>
  );
}

function StyleSelect({
  selectedStyleId,
  altStyles,
  onChange,
  initialFocusRef,
}) {
  const defaultStyle = { id: null, adjectiveName: "Default" };

  const styles = [defaultStyle, ...altStyles];

  return (
    <Flex
      as="form"
      direction="column"
      gap="2"
      maxHeight={{ base: "30vh", md: "10rem" }}
      padding="4px"
      overflow="auto"
    >
      {styles.map((altStyle) => (
        <StyleOption
          key={altStyle.id}
          altStyle={altStyle}
          checked={selectedStyleId === altStyle.id}
          onChange={onChange}
          inputRef={selectedStyleId === altStyle.id ? initialFocusRef : null}
        />
      ))}
    </Flex>
  );
}

function StyleOption({ altStyle, checked, onChange, inputRef }) {
  const theme = useTheme();
  const selectedBorderColor = useColorModeValue(
    theme.colors.green["600"],
    theme.colors.green["300"],
  );
  const outlineShadow = useToken("shadows", "outline");

  return (
    <ClassNames>
      {({ css, cx }) => (
        <Box
          as="label"
          cursor="pointer"
          onClick={(e) => {
            // HACK: We need the timeout to beat the popover's focus stealing!
            const input = e.currentTarget.querySelector("input");
            setTimeout(() => input.focus(), 0);
          }}
        >
          <VisuallyHidden
            as="input"
            type="radio"
            name="style"
            value={altStyle.id}
            checked={checked}
            onChange={(e) => onChange(altStyle.id)}
            ref={inputRef}
          />
          <Flex
            alignItems="center"
            gap="2"
            borderRadius="md"
            // HACK: Don't let the thumbnail image overlap the border
            paddingLeft="2px"
            paddingY="2px"
            className={cx(css`
              border: 2px solid transparent;
              opacity: 0.8;
              transition: all 0.2s;

              input:focus + & {
                box-shadow: ${outlineShadow};
              }

              input:checked + & {
                border-color: ${selectedBorderColor};
                opacity: 1;
                font-weight: bold;
              }
            `)}
          >
            {altStyle.thumbnailUrl ? (
              <Box
                as="img"
                src={altStyle.thumbnailUrl}
                alt="Item thumbnail"
                width="40px"
                height="40px"
                loading="lazy"
              />
            ) : (
              <Box width="40px" height="40px" />
            )}
            <Box width="2" />
            {altStyle.adjectiveName}
          </Flex>
        </Box>
      )}
    </ClassNames>
  );
}

function StyleExplanation() {
  return (
    <Box
      fontSize="xs"
      fontStyle="italic"
      textAlign="center"
      opacity="0.7"
      marginTop="2"
    >
      <Box as="a" href="/alt-styles" target="_blank" textDecoration="underline">
        Alt Styles
      </Box>{" "}
      are NC items that override the pet's appearance via the{" "}
      <Box
        as="a"
        href="https://www.neopets.com/stylingchamber/"
        target="_blank"
        textDecoration="underline"
      >
        Styling Chamber
      </Box>
      . Not all items fit Alt Style pets. The pet's color doesn't have to match.
    </Box>
  );
}

function EmojiImage({ src, alt, boxSize = 16 }) {
  return <img src={src} alt={alt} width={boxSize} height={boxSize} />;
}

function usePoses(speciesId, colorId, selectedPose) {
  const { loading, error, data } = useQuery(
    gql`
      query PosePicker($speciesId: ID!, $colorId: ID!) {
        happyMasc: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: HAPPY_MASC
        ) {
          ...PetAppearanceForPosePicker
        }
        sadMasc: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: SAD_MASC
        ) {
          ...PetAppearanceForPosePicker
        }
        sickMasc: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: SICK_MASC
        ) {
          ...PetAppearanceForPosePicker
        }
        happyFem: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: HAPPY_FEM
        ) {
          ...PetAppearanceForPosePicker
        }
        sadFem: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: SAD_FEM
        ) {
          ...PetAppearanceForPosePicker
        }
        sickFem: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: SICK_FEM
        ) {
          ...PetAppearanceForPosePicker
        }
        unconverted: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: UNCONVERTED
        ) {
          ...PetAppearanceForPosePicker
        }
        unknown: petAppearance(
          speciesId: $speciesId
          colorId: $colorId
          pose: UNKNOWN
        ) {
          ...PetAppearanceForPosePicker
        }
      }

      ${petAppearanceForPosePickerFragment}
    `,
    { variables: { speciesId, colorId }, onError: (e) => console.error(e) },
  );

  const poseInfos = {
    happyMasc: {
      ...data?.happyMasc,
      pose: "HAPPY_MASC",
      isAvailable: Boolean(data?.happyMasc),
      isSelected: selectedPose === "HAPPY_MASC",
    },
    sadMasc: {
      ...data?.sadMasc,
      pose: "SAD_MASC",
      isAvailable: Boolean(data?.sadMasc),
      isSelected: selectedPose === "SAD_MASC",
    },
    sickMasc: {
      ...data?.sickMasc,
      pose: "SICK_MASC",
      isAvailable: Boolean(data?.sickMasc),
      isSelected: selectedPose === "SICK_MASC",
    },
    happyFem: {
      ...data?.happyFem,
      pose: "HAPPY_FEM",
      isAvailable: Boolean(data?.happyFem),
      isSelected: selectedPose === "HAPPY_FEM",
    },
    sadFem: {
      ...data?.sadFem,
      pose: "SAD_FEM",
      isAvailable: Boolean(data?.sadFem),
      isSelected: selectedPose === "SAD_FEM",
    },
    sickFem: {
      ...data?.sickFem,
      pose: "SICK_FEM",
      isAvailable: Boolean(data?.sickFem),
      isSelected: selectedPose === "SICK_FEM",
    },
    unconverted: {
      ...data?.unconverted,
      pose: "UNCONVERTED",
      isAvailable: Boolean(data?.unconverted),
      isSelected: selectedPose === "UNCONVERTED",
    },
    unknown: {
      ...data?.unknown,
      pose: "UNKNOWN",
      isAvailable: Boolean(data?.unknown),
      isSelected: selectedPose === "UNKNOWN",
    },
  };

  return { loading, error, poseInfos };
}

function getIcon(pose) {
  if (["HAPPY_MASC", "HAPPY_FEM"].includes(pose)) {
    return twemojiSmile;
  } else if (["SAD_MASC", "SAD_FEM"].includes(pose)) {
    return twemojiCry;
  } else if (["SICK_MASC", "SICK_FEM"].includes(pose)) {
    return twemojiSick;
  } else if (pose === "UNCONVERTED") {
    return twemojiHourglass;
  } else {
    return twemojiSmile;
  }
}

function getLabel(pose) {
  if (pose === "HAPPY_MASC" || pose === "HAPPY_FEM") {
    return "Happy";
  } else if (pose === "SAD_MASC" || pose === "SAD_FEM") {
    return "Sad";
  } else if (pose === "SICK_MASC" || pose === "SICK_FEM") {
    return "Sick";
  } else if (pose === "UNCONVERTED") {
    return "Retired UC";
  } else {
    return "Default";
  }
}

function getTransform(poseInfo) {
  const { pose, bodyId } = poseInfo;
  if (pose === "UNCONVERTED") {
    return transformsByBodyId.default;
  }
  if (bodyId in transformsByBodyId) {
    return transformsByBodyId[bodyId];
  }
  return transformsByBodyId.default;
}

export const petAppearanceForPosePickerFragment = gql`
  fragment PetAppearanceForPosePicker on PetAppearance {
    id
    bodyId
    pose
    ...PetAppearanceForOutfitPreview
  }
  ${petAppearanceFragment}
`;

const transformsByBodyId = {
  93: "translate(-5px, 10px) scale(2.8)",
  106: "translate(-8px, 8px) scale(2.9)",
  47: "translate(-1px, 17px) scale(3)",
  84: "translate(-21px, 22px) scale(3.2)",
  146: "translate(2px, 15px) scale(3.3)",
  250: "translate(-14px, 28px) scale(3.4)",
  212: "translate(-4px, 8px) scale(2.9)",
  74: "translate(-26px, 30px) scale(3.0)",
  94: "translate(-4px, 8px) scale(3.1)",
  132: "translate(-14px, 18px) scale(3.0)",
  56: "translate(-7px, 24px) scale(2.9)",
  90: "translate(-16px, 20px) scale(3.5)",
  136: "translate(-11px, 18px) scale(3.0)",
  138: "translate(-14px, 26px) scale(3.5)",
  166: "translate(-13px, 24px) scale(3.1)",
  119: "translate(-6px, 29px) scale(3.1)",
  126: "translate(3px, 13px) scale(3.1)",
  67: "translate(2px, 27px) scale(3.4)",
  163: "translate(-7px, 16px) scale(3.1)",
  147: "translate(-2px, 15px) scale(3.0)",
  80: "translate(-2px, -17px) scale(3.0)",
  117: "translate(-14px, 16px) scale(3.6)",
  201: "translate(-16px, 16px) scale(3.2)",
  51: "translate(-2px, 6px) scale(3.2)",
  208: "translate(-3px, 6px) scale(3.7)",
  196: "translate(-7px, 19px) scale(5.2)",
  143: "translate(-16px, 20px) scale(3.5)",
  150: "translate(-3px, 24px) scale(3.2)",
  175: "translate(-9px, 15px) scale(3.4)",
  173: "translate(3px, 57px) scale(4.4)",
  199: "translate(-28px, 35px) scale(3.8)",
  52: "translate(-8px, 33px) scale(3.5)",
  109: "translate(-8px, -6px) scale(3.2)",
  134: "translate(-14px, 14px) scale(3.1)",
  95: "translate(-12px, 0px) scale(3.4)",
  96: "translate(6px, 23px) scale(3.3)",
  154: "translate(-20px, 25px) scale(3.6)",
  55: "translate(-16px, 28px) scale(4.0)",
  76: "translate(-8px, 11px) scale(3.0)",
  156: "translate(2px, 12px) scale(3.5)",
  78: "translate(-3px, 18px) scale(3.0)",
  191: "translate(-18px, 46px) scale(4.4)",
  187: "translate(-6px, 22px) scale(3.2)",
  46: "translate(-2px, 19px) scale(3.4)",
  178: "translate(-11px, 32px) scale(3.3)",
  100: "translate(-13px, 23px) scale(3.3)",
  130: "translate(-14px, 4px) scale(3.1)",
  188: "translate(-9px, 24px) scale(3.5)",
  257: "translate(-14px, 25px) scale(3.4)",
  206: "translate(-7px, 4px) scale(3.6)",
  101: "translate(-13px, 16px) scale(3.2)",
  68: "translate(-2px, 13px) scale(3.2)",
  182: "translate(-6px, 4px) scale(3.1)",
  180: "translate(-15px, 22px) scale(3.6)",
  306: "translate(1px, 14px) scale(3.1)",
  default: "scale(2.5)",
};

export default React.memo(PosePicker);