impress/app/javascript/wardrobe-2020/WardrobePage/support/PosePickerSupport.js

import React from "react";
import gql from "graphql-tag";
import { useMutation, useQuery } from "@apollo/client";
import {
	Box,
	Button,
	IconButton,
	Select,
	Spinner,
	Switch,
	Wrap,
	WrapItem,
	useDisclosure,
	UnorderedList,
	ListItem,
} from "@chakra-ui/react";
import {
	ArrowBackIcon,
	ArrowForwardIcon,
	CheckCircleIcon,
	EditIcon,
} from "@chakra-ui/icons";

import HangerSpinner from "../../components/HangerSpinner";
import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
import useSupport from "./useSupport";
import AppearanceLayerSupportModal from "./AppearanceLayerSupportModal";
import { petAppearanceForPosePickerFragment } from "../PosePicker";

function PosePickerSupport({
	speciesId,
	colorId,
	pose,
	appearanceId,
	initialFocusRef,
	dispatchToOutfit,
}) {
	const { loading, error, data } = useQuery(
		gql`
			query PosePickerSupport($speciesId: ID!, $colorId: ID!) {
				petAppearances(speciesId: $speciesId, colorId: $colorId) {
					id
					pose
					isGlitched
					layers {
						id
						zone {
							id
							label
						}

						# For AppearanceLayerSupportModal
						remoteId
						bodyId
						swfUrl
						svgUrl
						imageUrl: imageUrlV2(idealSize: SIZE_600)
						canvasMovieLibraryUrl
					}
					restrictedZones {
						id
						label
					}

					# For AppearanceLayerSupportModal to know the name
					species {
						id
						name
					}
					color {
						id
						name
					}

					# Also, anything the PosePicker wants that isn't here, so that we
					# don't have to refetch anything when we change the canonical poses.
					...PetAppearanceForPosePicker
				}

				...CanonicalPetAppearances
			}
			${canonicalPetAppearancesFragment}
			${petAppearanceForPosePickerFragment}
		`,
		{ variables: { speciesId, colorId } },
	);

	// Resize the Popover when we toggle loading state, because it probably will
	// affect the content size. appearanceId might also affect content size, if
	// it occupies different zones.
	//
	// NOTE: This also triggers an additional necessary resize when the component
	//       first mounts, because PosePicker lazy-loads it, so it actually
	//       mounting affects size too.
	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"));
	}, [loading, appearanceId]);

	const canonicalAppearanceIdsByPose = {
		HAPPY_MASC: data?.happyMasc?.id,
		SAD_MASC: data?.sadMasc?.id,
		SICK_MASC: data?.sickMasc?.id,
		HAPPY_FEM: data?.happyFem?.id,
		SAD_FEM: data?.sadFem?.id,
		SICK_FEM: data?.sickFem?.id,
		UNCONVERTED: data?.unconverted?.id,
		UNKNOWN: data?.unknown?.id,
	};
	const canonicalAppearanceIds = Object.values(
		canonicalAppearanceIdsByPose,
	).filter((id) => id);

	const providedAppearanceId = appearanceId;
	if (!providedAppearanceId) {
		appearanceId = canonicalAppearanceIdsByPose[pose];
	}

	// If you don't already have `appearanceId` in the outfit state, opening up
	// PosePickerSupport adds it! That way, if you make changes that affect the
	// canonical poses, we'll still stay navigated to this one.
	React.useEffect(() => {
		if (!providedAppearanceId && appearanceId) {
			dispatchToOutfit({
				type: "setPose",
				pose,
				appearanceId,
			});
		}
	}, [providedAppearanceId, appearanceId, pose, dispatchToOutfit]);

	if (loading) {
		return (
			<Box display="flex" justifyContent="center">
				<HangerSpinner size="sm" />
			</Box>
		);
	}

	if (error) {
		return (
			<Box color="red.400" marginTop="8">
				{error.message}
			</Box>
		);
	}

	const currentPetAppearance = data.petAppearances.find(
		(pa) => pa.id === appearanceId,
	);
	if (!currentPetAppearance) {
		return (
			<Box color="red.400" marginTop="8">
				Pet appearance with ID {JSON.stringify(appearanceId)} not found
			</Box>
		);
	}

	return (
		<Box>
			<PosePickerSupportNavigator
				petAppearances={data.petAppearances}
				currentPetAppearance={currentPetAppearance}
				canonicalAppearanceIds={canonicalAppearanceIds}
				dropdownRef={initialFocusRef}
				dispatchToOutfit={dispatchToOutfit}
			/>
			<Metadata
				fontSize="sm"
				// Build a new copy of this tree when the appearance changes, to reset
				// things like element focus and mutation state!
				key={currentPetAppearance.id}
			>
				<MetadataLabel>DTI ID:</MetadataLabel>
				<MetadataValue>{appearanceId}</MetadataValue>
				<MetadataLabel>Pose:</MetadataLabel>
				<MetadataValue>
					<PosePickerSupportPoseFields
						petAppearance={currentPetAppearance}
						speciesId={speciesId}
						colorId={colorId}
					/>
				</MetadataValue>
				<MetadataLabel>Layers:</MetadataLabel>
				<MetadataValue>
					<Wrap spacing="1">
						{currentPetAppearance.layers
							.map((layer) => [`${layer.zone.label} (${layer.zone.id})`, layer])
							.sort((a, b) => a[0].localeCompare(b[0]))
							.map(([text, layer]) => (
								<WrapItem key={layer.id}>
									<PetLayerSupportLink
										outfitState={{ speciesId, colorId, pose }}
										petAppearance={currentPetAppearance}
										layer={layer}
									>
										{text}
										<EditIcon marginLeft="1" />
									</PetLayerSupportLink>
								</WrapItem>
							))}
					</Wrap>
				</MetadataValue>
				<MetadataLabel>Restricts:</MetadataLabel>
				<MetadataValue maxHeight="64" overflowY="auto">
					{currentPetAppearance.restrictedZones.length > 0 ? (
						<UnorderedList>
							{currentPetAppearance.restrictedZones
								.map((zone) => `${zone.label} (${zone.id})`)
								.sort((a, b) => a[0].localeCompare(b[0]))
								.map((zoneText) => (
									<ListItem key={zoneText}>{zoneText}</ListItem>
								))}
						</UnorderedList>
					) : (
						<Box fontStyle="italic" opacity="0.8">
							None
						</Box>
					)}
				</MetadataValue>
			</Metadata>
		</Box>
	);
}

function PetLayerSupportLink({ outfitState, petAppearance, layer, children }) {
	const { isOpen, onOpen, onClose } = useDisclosure();
	return (
		<>
			<Button size="xs" onClick={onOpen}>
				{children}
			</Button>
			<AppearanceLayerSupportModal
				outfitState={outfitState}
				petAppearance={petAppearance}
				layer={layer}
				isOpen={isOpen}
				onClose={onClose}
			/>
		</>
	);
}

function PosePickerSupportNavigator({
	petAppearances,
	currentPetAppearance,
	canonicalAppearanceIds,
	dropdownRef,
	dispatchToOutfit,
}) {
	const currentIndex = petAppearances.indexOf(currentPetAppearance);
	const prevPetAppearance = petAppearances[currentIndex - 1];
	const nextPetAppearance = petAppearances[currentIndex + 1];

	return (
		<Box
			display="flex"
			justifyContent="flex-end"
			marginBottom="4"
			// Space for the position-absolute PosePicker mode switcher
			paddingLeft="12"
		>
			<IconButton
				aria-label="Go to previous appearance"
				icon={<ArrowBackIcon />}
				size="sm"
				marginRight="2"
				isDisabled={prevPetAppearance == null}
				onClick={() =>
					dispatchToOutfit({
						type: "setPose",
						pose: prevPetAppearance.pose,
						appearanceId: prevPetAppearance.id,
					})
				}
			/>
			<Select
				size="sm"
				width="auto"
				value={currentPetAppearance.id}
				ref={dropdownRef}
				onChange={(e) => {
					const id = e.target.value;
					const petAppearance = petAppearances.find((pa) => pa.id === id);
					dispatchToOutfit({
						type: "setPose",
						pose: petAppearance.pose,
						appearanceId: petAppearance.id,
					});
				}}
			>
				{petAppearances.map((pa) => (
					<option key={pa.id} value={pa.id}>
						{POSE_NAMES[pa.pose]}{" "}
						{canonicalAppearanceIds.includes(pa.id) && "⭐️"}
						{pa.isGlitched && "👾"} ({pa.id})
					</option>
				))}
			</Select>
			<IconButton
				aria-label="Go to next appearance"
				icon={<ArrowForwardIcon />}
				size="sm"
				marginLeft="2"
				isDisabled={nextPetAppearance == null}
				onClick={() =>
					dispatchToOutfit({
						type: "setPose",
						pose: nextPetAppearance.pose,
						appearanceId: nextPetAppearance.id,
					})
				}
			/>
		</Box>
	);
}

function PosePickerSupportPoseFields({ petAppearance, speciesId, colorId }) {
	const { supportSecret } = useSupport();

	const [mutatePose, poseMutation] = useMutation(
		gql`
			mutation PosePickerSupportSetPetAppearancePose(
				$appearanceId: ID!
				$pose: Pose!
				$supportSecret: String!
			) {
				setPetAppearancePose(
					appearanceId: $appearanceId
					pose: $pose
					supportSecret: $supportSecret
				) {
					id
					pose
				}
			}
		`,
		{
			refetchQueries: [
				{
					query: gql`
						query PosePickerSupportRefetchCanonicalAppearances(
							$speciesId: ID!
							$colorId: ID!
						) {
							...CanonicalPetAppearances
						}
						${canonicalPetAppearancesFragment}
					`,
					variables: { speciesId, colorId },
				},
			],
		},
	);

	const [mutateIsGlitched, isGlitchedMutation] = useMutation(
		gql`
			mutation PosePickerSupportSetPetAppearanceIsGlitched(
				$appearanceId: ID!
				$isGlitched: Boolean!
				$supportSecret: String!
			) {
				setPetAppearanceIsGlitched(
					appearanceId: $appearanceId
					isGlitched: $isGlitched
					supportSecret: $supportSecret
				) {
					id
					isGlitched
				}
			}
		`,
		{
			refetchQueries: [
				{
					query: gql`
						query PosePickerSupportRefetchCanonicalAppearances(
							$speciesId: ID!
							$colorId: ID!
						) {
							...CanonicalPetAppearances
						}
						${canonicalPetAppearancesFragment}
					`,
					variables: { speciesId, colorId },
				},
			],
		},
	);

	return (
		<Box>
			<Box display="flex" flexDirection="row" alignItems="center">
				<Select
					size="sm"
					value={petAppearance.pose}
					flex="0 1 200px"
					icon={
						poseMutation.loading ? (
							<Spinner />
						) : poseMutation.data ? (
							<CheckCircleIcon />
						) : undefined
					}
					onChange={(e) => {
						const pose = e.target.value;
						mutatePose({
							variables: {
								appearanceId: petAppearance.id,
								pose,
								supportSecret,
							},
							optimisticResponse: {
								__typename: "Mutation",
								setPetAppearancePose: {
									__typename: "PetAppearance",
									id: petAppearance.id,
									pose,
								},
							},
						}).catch((e) => {
							/* Discard errors here; we'll show them in the UI! */
						});
					}}
					isInvalid={poseMutation.error != null}
				>
					{Object.entries(POSE_NAMES).map(([pose, name]) => (
						<option key={pose} value={pose}>
							{name}
						</option>
					))}
				</Select>
				<Select
					size="sm"
					marginLeft="2"
					flex="0 1 150px"
					value={petAppearance.isGlitched}
					icon={
						isGlitchedMutation.loading ? (
							<Spinner />
						) : isGlitchedMutation.data ? (
							<CheckCircleIcon />
						) : undefined
					}
					onChange={(e) => {
						const isGlitched = e.target.value === "true";
						mutateIsGlitched({
							variables: {
								appearanceId: petAppearance.id,
								isGlitched,
								supportSecret,
							},
							optimisticResponse: {
								__typename: "Mutation",
								setPetAppearanceIsGlitched: {
									__typename: "PetAppearance",
									id: petAppearance.id,
									isGlitched,
								},
							},
						}).catch((e) => {
							/* Discard errors here; we'll show them in the UI! */
						});
					}}
					isInvalid={isGlitchedMutation.error != null}
				>
					<option value="false">Valid</option>
					<option value="true">Glitched</option>
				</Select>
			</Box>
			{poseMutation.error && (
				<Box color="red.400">{poseMutation.error.message}</Box>
			)}
			{isGlitchedMutation.error && (
				<Box color="red.400">{isGlitchedMutation.error.message}</Box>
			)}
		</Box>
	);
}

export function PosePickerSupportSwitch({ isChecked, onChange }) {
	return (
		<Box as="label" display="flex" flexDirection="row" alignItems="center">
			<Box fontSize="sm">
				<span role="img" aria-label="Support">
					💖
				</span>
			</Box>
			<Switch
				colorScheme="pink"
				marginLeft="1"
				size="sm"
				isChecked={isChecked}
				onChange={onChange}
			/>
		</Box>
	);
}

const POSE_NAMES = {
	HAPPY_MASC: "Happy Masc",
	HAPPY_FEM: "Happy Fem",
	SAD_MASC: "Sad Masc",
	SAD_FEM: "Sad Fem",
	SICK_MASC: "Sick Masc",
	SICK_FEM: "Sick Fem",
	UNCONVERTED: "Unconverted",
	UNKNOWN: "Unknown",
};

const canonicalPetAppearancesFragment = gql`
	fragment CanonicalPetAppearances on Query {
		happyMasc: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: HAPPY_MASC
		) {
			id
		}

		sadMasc: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: SAD_MASC
		) {
			id
		}

		sickMasc: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: SICK_MASC
		) {
			id
		}

		happyFem: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: HAPPY_FEM
		) {
			id
		}

		sadFem: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: SAD_FEM
		) {
			id
		}

		sickFem: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: SICK_FEM
		) {
			id
		}

		unconverted: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: UNCONVERTED
		) {
			id
		}

		unknown: petAppearance(
			speciesId: $speciesId
			colorId: $colorId
			pose: UNKNOWN
		) {
			id
		}
	}
`;

export default PosePickerSupport;