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

import * as React from "react";
import gql from "graphql-tag";
import { useMutation } from "@apollo/client";
import {
	Button,
	Box,
	FormControl,
	FormErrorMessage,
	FormHelperText,
	FormLabel,
	HStack,
	Modal,
	ModalBody,
	ModalCloseButton,
	ModalContent,
	ModalFooter,
	ModalHeader,
	ModalOverlay,
	Radio,
	RadioGroup,
	Spinner,
	useDisclosure,
	useToast,
	CheckboxGroup,
	VStack,
	Checkbox,
} from "@chakra-ui/react";
import { ChevronRightIcon, ExternalLinkIcon } from "@chakra-ui/icons";

import AppearanceLayerSupportUploadModal from "./AppearanceLayerSupportUploadModal";
import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
import { OutfitLayers } from "../../components/OutfitPreview";
import SpeciesColorPicker from "../../components/SpeciesColorPicker";
import useOutfitAppearance, {
	itemAppearanceFragment,
} from "../../components/useOutfitAppearance";
import useSupport from "./useSupport";

/**
 * AppearanceLayerSupportModal offers Support info and tools for a specific item
 * appearance layer. Open it by clicking a layer from ItemSupportDrawer.
 */
function AppearanceLayerSupportModal({
	item, // Specify this or `petAppearance`
	petAppearance, // Specify this or `item`
	layer,
	outfitState, // speciesId, colorId, pose
	isOpen,
	onClose,
}) {
	const [selectedBodyId, setSelectedBodyId] = React.useState(layer.bodyId);
	const [selectedKnownGlitches, setSelectedKnownGlitches] = React.useState(
		layer.knownGlitches,
	);

	const [previewBiology, setPreviewBiology] = React.useState({
		speciesId: outfitState.speciesId,
		colorId: outfitState.colorId,
		pose: outfitState.pose,
		isValid: true,
	});
	const [uploadModalIsOpen, setUploadModalIsOpen] = React.useState(false);
	const { supportSecret } = useSupport();
	const toast = useToast();

	const parentName = item
		? item.name
		: `${petAppearance.color.name} ${petAppearance.species.name} ${petAppearance.id}`;

	const [mutate, { loading: mutationLoading, error: mutationError }] =
		useMutation(
			gql`
				mutation ApperanceLayerSupportSetLayerBodyId(
					$layerId: ID!
					$bodyId: ID!
					$knownGlitches: [AppearanceLayerKnownGlitch!]!
					$supportSecret: String!
					$outfitSpeciesId: ID!
					$outfitColorId: ID!
					$formPreviewSpeciesId: ID!
					$formPreviewColorId: ID!
				) {
					setLayerBodyId(
						layerId: $layerId
						bodyId: $bodyId
						supportSecret: $supportSecret
					) {
						# This mutation returns the affected AppearanceLayer. Fetch the
						# updated fields, including the appearance on the outfit pet and the
						# form preview pet, to automatically update our cached appearance in
						# the rest of the app. That means you should be able to see your
						# changes immediately!
						id
						bodyId
						item {
							id
							appearanceOnOutfit: appearanceOn(
								speciesId: $outfitSpeciesId
								colorId: $outfitColorId
							) {
								...ItemAppearanceForOutfitPreview
							}

							appearanceOnFormPreviewPet: appearanceOn(
								speciesId: $formPreviewSpeciesId
								colorId: $formPreviewColorId
							) {
								...ItemAppearanceForOutfitPreview
							}
						}
					}

					setLayerKnownGlitches(
						layerId: $layerId
						knownGlitches: $knownGlitches
						supportSecret: $supportSecret
					) {
						id
						knownGlitches
						svgUrl # Affected by OFFICIAL_SVG_IS_INCORRECT
					}
				}
				${itemAppearanceFragment}
			`,
			{
				variables: {
					layerId: layer.id,
					bodyId: selectedBodyId,
					knownGlitches: selectedKnownGlitches,
					supportSecret,
					outfitSpeciesId: outfitState.speciesId,
					outfitColorId: outfitState.colorId,
					formPreviewSpeciesId: previewBiology.speciesId,
					formPreviewColorId: previewBiology.colorId,
				},
				onCompleted: () => {
					onClose();
					toast({
						status: "success",
						title: `Saved layer ${layer.id}: ${parentName}`,
					});
				},
			},
		);

	// TODO: Would be nicer to just learn the correct URL from the server, but we
	//       don't happen to be saving it, and it would be extra stuff to put on
	//       the GraphQL request for non-Support users. We could also just try
	//       loading them, but, ehhh…
	const [newManifestUrl, oldManifestUrl] = convertSwfUrlToPossibleManifestUrls(
		layer.swfUrl,
	);

	return (
		<Modal size="xl" isOpen={isOpen} onClose={onClose}>
			<ModalOverlay>
				<ModalContent>
					<ModalHeader>
						Layer {layer.id}: {parentName}
					</ModalHeader>
					<ModalCloseButton />
					<ModalBody>
						<Metadata>
							<MetadataLabel>DTI ID:</MetadataLabel>
							<MetadataValue>{layer.id}</MetadataValue>
							<MetadataLabel>Neopets ID:</MetadataLabel>
							<MetadataValue>{layer.remoteId}</MetadataValue>
							<MetadataLabel>Zone:</MetadataLabel>
							<MetadataValue>
								{layer.zone.label} ({layer.zone.id})
							</MetadataValue>
							<MetadataLabel>Assets:</MetadataLabel>
							<MetadataValue>
								<HStack spacing="2">
									<Button
										as="a"
										size="xs"
										target="_blank"
										href={newManifestUrl}
										colorScheme="teal"
									>
										Manifest (new) <ExternalLinkIcon ml="1" />
									</Button>
									<Button
										as="a"
										size="xs"
										target="_blank"
										href={oldManifestUrl}
										colorScheme="teal"
									>
										Manifest (old) <ExternalLinkIcon ml="1" />
									</Button>
								</HStack>
								<HStack spacing="2" marginTop="1">
									{layer.canvasMovieLibraryUrl ? (
										<Button
											as="a"
											size="xs"
											target="_blank"
											href={layer.canvasMovieLibraryUrl}
											colorScheme="teal"
										>
											Movie <ExternalLinkIcon ml="1" />
										</Button>
									) : (
										<Button size="xs" isDisabled>
											No Movie
										</Button>
									)}
									{layer.svgUrl ? (
										<Button
											as="a"
											size="xs"
											target="_blank"
											href={layer.svgUrl}
											colorScheme="teal"
										>
											SVG <ExternalLinkIcon ml="1" />
										</Button>
									) : (
										<Button size="xs" isDisabled>
											No SVG
										</Button>
									)}
									{layer.imageUrl ? (
										<Button
											as="a"
											size="xs"
											target="_blank"
											href={layer.imageUrl}
											colorScheme="teal"
										>
											PNG <ExternalLinkIcon ml="1" />
										</Button>
									) : (
										<Button size="xs" isDisabled>
											No PNG
										</Button>
									)}
									<Button
										as="a"
										size="xs"
										target="_blank"
										href={layer.swfUrl}
										colorScheme="teal"
									>
										SWF <ExternalLinkIcon ml="1" />
									</Button>
									<Box flex="1 1 0" />
									{item && (
										<>
											<Button
												size="xs"
												colorScheme="gray"
												onClick={() => setUploadModalIsOpen(true)}
											>
												Upload PNG <ChevronRightIcon />
											</Button>
											<AppearanceLayerSupportUploadModal
												item={item}
												layer={layer}
												isOpen={uploadModalIsOpen}
												onClose={() => setUploadModalIsOpen(false)}
											/>
										</>
									)}
								</HStack>
							</MetadataValue>
						</Metadata>
						<Box height="8" />
						{item && (
							<>
								<AppearanceLayerSupportPetCompatibilityFields
									item={item}
									layer={layer}
									outfitState={outfitState}
									selectedBodyId={selectedBodyId}
									previewBiology={previewBiology}
									onChangeBodyId={setSelectedBodyId}
									onChangePreviewBiology={setPreviewBiology}
								/>
								<Box height="8" />
							</>
						)}
						<AppearanceLayerSupportKnownGlitchesFields
							selectedKnownGlitches={selectedKnownGlitches}
							onChange={setSelectedKnownGlitches}
						/>
					</ModalBody>
					<ModalFooter>
						{item && (
							<AppearanceLayerSupportModalRemoveButton
								item={item}
								layer={layer}
								outfitState={outfitState}
								onRemoveSuccess={onClose}
							/>
						)}
						<Box flex="1 0 0" />
						{mutationError && (
							<Box
								color="red.400"
								fontSize="sm"
								marginLeft="8"
								marginRight="2"
								textAlign="right"
							>
								{mutationError.message}
							</Box>
						)}
						<Button
							isLoading={mutationLoading}
							colorScheme="green"
							onClick={() =>
								mutate().catch((e) => {
									/* Discard errors here; we'll show them in the UI! */
								})
							}
							flex="0 0 auto"
						>
							Save changes
						</Button>
					</ModalFooter>
				</ModalContent>
			</ModalOverlay>
		</Modal>
	);
}

function AppearanceLayerSupportPetCompatibilityFields({
	item,
	layer,
	outfitState,
	selectedBodyId,
	previewBiology,
	onChangeBodyId,
	onChangePreviewBiology,
}) {
	const [selectedBiology, setSelectedBiology] = React.useState(previewBiology);

	const {
		loading,
		error,
		visibleLayers,
		bodyId: appearanceBodyId,
	} = useOutfitAppearance({
		speciesId: previewBiology.speciesId,
		colorId: previewBiology.colorId,
		pose: previewBiology.pose,
		wornItemIds: [item.id],
	});

	const biologyLayers = visibleLayers.filter((l) => l.source === "pet");

	// After we touch a species/color selector and null out `bodyId`, when the
	// appearance body ID loads in, select it as the new body ID.
	//
	// This might move the radio button away from "all pets", but I think that's
	// a _less_ surprising experience: if you're touching the pickers, then
	// that's probably where you head is.
	React.useEffect(() => {
		if (selectedBodyId == null && appearanceBodyId != null) {
			onChangeBodyId(appearanceBodyId);
		}
	}, [selectedBodyId, appearanceBodyId, onChangeBodyId]);

	return (
		<FormControl isInvalid={error || !selectedBiology.isValid ? true : false}>
			<FormLabel fontWeight="bold">Pet compatibility</FormLabel>
			<RadioGroup
				colorScheme="green"
				value={selectedBodyId}
				onChange={(newBodyId) => onChangeBodyId(newBodyId)}
				marginBottom="4"
			>
				<Radio value="0">
					Fits all pets{" "}
					<Box display="inline" color="gray.400" fontSize="sm">
						(Body ID: 0)
					</Box>
				</Radio>
				<Radio as="div" value={appearanceBodyId} marginTop="2">
					Fits all pets with the same body as:{" "}
					<Box display="inline" color="gray.400" fontSize="sm">
						(Body ID:{" "}
						{appearanceBodyId == null ? (
							<Spinner size="sm" />
						) : (
							appearanceBodyId
						)}
						)
					</Box>
				</Radio>
			</RadioGroup>
			<Box display="flex" flexDirection="column" alignItems="center">
				<Box
					width="150px"
					height="150px"
					marginTop="2"
					marginBottom="2"
					boxShadow="md"
					borderRadius="md"
				>
					<OutfitLayers
						loading={loading}
						visibleLayers={[...biologyLayers, layer]}
					/>
				</Box>
				<SpeciesColorPicker
					speciesId={selectedBiology.speciesId}
					colorId={selectedBiology.colorId}
					idealPose={outfitState.pose}
					size="sm"
					showPlaceholders
					onChange={(species, color, isValid, pose) => {
						const speciesId = species.id;
						const colorId = color.id;

						setSelectedBiology({ speciesId, colorId, isValid, pose });
						if (isValid) {
							onChangePreviewBiology({ speciesId, colorId, isValid, pose });

							// Also temporarily null out the body ID. We'll switch to the new
							// body ID once it's loaded.
							onChangeBodyId(null);
						}
					}}
				/>
				<Box height="1" />
				{!error && (
					<FormHelperText>
						If it doesn't look right, try some other options until it does!
					</FormHelperText>
				)}
				{error && <FormErrorMessage>{error.message}</FormErrorMessage>}
			</Box>
		</FormControl>
	);
}

function AppearanceLayerSupportKnownGlitchesFields({
	selectedKnownGlitches,
	onChange,
}) {
	return (
		<FormControl>
			<FormLabel fontWeight="bold">Known glitches</FormLabel>
			<CheckboxGroup value={selectedKnownGlitches} onChange={onChange}>
				<VStack spacing="2" align="flex-start">
					<Checkbox value="OFFICIAL_SWF_IS_INCORRECT">
						Official SWF is incorrect{" "}
						<Box display="inline" color="gray.400" fontSize="sm">
							(Will display a message)
						</Box>
					</Checkbox>
					<Checkbox value="OFFICIAL_SVG_IS_INCORRECT">
						Official SVG is incorrect{" "}
						<Box display="inline" color="gray.400" fontSize="sm">
							(Will use the PNG instead)
						</Box>
					</Checkbox>
					<Checkbox value="OFFICIAL_MOVIE_IS_INCORRECT">
						Official Movie is incorrect{" "}
						<Box display="inline" color="gray.400" fontSize="sm">
							(Will display a message)
						</Box>
					</Checkbox>
					<Checkbox value="DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN">
						Displays incorrectly, but cause unknown{" "}
						<Box display="inline" color="gray.400" fontSize="sm">
							(Will display a vague message)
						</Box>
					</Checkbox>
					<Checkbox value="OFFICIAL_BODY_ID_IS_INCORRECT">
						Fits all pets on-site, but should not{" "}
						<Box display="inline" color="gray.400" fontSize="sm">
							(TNT's fault. Will show a message, and keep the compatibility
							settings above.)
						</Box>
					</Checkbox>
					<Checkbox value="REQUIRES_OTHER_BODY_SPECIFIC_ASSETS">
						Only fits pets with other body-specific assets{" "}
						<Box display="inline" color="gray.400" fontSize="sm">
							(DTI's fault: bodyId=0 is a lie! Will mark incompatible for some
							pets.)
						</Box>
					</Checkbox>
				</VStack>
			</CheckboxGroup>
		</FormControl>
	);
}

function AppearanceLayerSupportModalRemoveButton({
	item,
	layer,
	outfitState,
	onRemoveSuccess,
}) {
	const { isOpen, onOpen, onClose } = useDisclosure();
	const toast = useToast();
	const { supportSecret } = useSupport();

	const [mutate, { loading, error }] = useMutation(
		gql`
			mutation AppearanceLayerSupportRemoveButton(
				$layerId: ID!
				$itemId: ID!
				$outfitSpeciesId: ID!
				$outfitColorId: ID!
				$supportSecret: String!
			) {
				removeLayerFromItem(
					layerId: $layerId
					itemId: $itemId
					supportSecret: $supportSecret
				) {
					# This mutation returns the affected layer, and the affected item.
					# Fetch the updated appearance for the current outfit, which should
					# no longer include this layer. This means you should be able to see
					# your changes immediately!
					item {
						id
						appearanceOn(speciesId: $outfitSpeciesId, colorId: $outfitColorId) {
							...ItemAppearanceForOutfitPreview
						}
					}

					# The layer's item should be null now, fetch to confirm and update!
					layer {
						id
						item {
							id
						}
					}
				}
			}
			${itemAppearanceFragment}
		`,
		{
			variables: {
				layerId: layer.id,
				itemId: item.id,
				outfitSpeciesId: outfitState.speciesId,
				outfitColorId: outfitState.colorId,
				supportSecret,
			},
			onCompleted: () => {
				onClose();
				onRemoveSuccess();
				toast({
					status: "success",
					title: `Removed layer ${layer.id} from ${item.name}`,
				});
			},
		},
	);

	return (
		<>
			<Button colorScheme="red" flex="0 0 auto" onClick={onOpen}>
				Remove
			</Button>
			<Modal isOpen={isOpen} onClose={onClose} size="xl" isCentered>
				<ModalOverlay>
					<ModalContent>
						<ModalCloseButton />
						<ModalHeader>
							Remove Layer {layer.id} ({layer.zone.label}) from {item.name}?
						</ModalHeader>
						<ModalBody>
							<Box as="p" marginBottom="4">
								This will permanently-ish remove Layer {layer.id} (
								{layer.zone.label}) from this item.
							</Box>
							<Box as="p" marginBottom="4">
								If you remove a correct layer by mistake, re-modeling should fix
								it, or Matchu can restore it if you write down the layer ID
								before proceeding!
							</Box>
							<Box as="p" marginBottom="4">
								Are you sure you want to remove Layer {layer.id} from this item?
							</Box>
						</ModalBody>
						<ModalFooter>
							<Button flex="0 0 auto" onClick={onClose}>
								Close
							</Button>
							<Box flex="1 0 0" />
							{error && (
								<Box
									color="red.400"
									fontSize="sm"
									marginLeft="8"
									marginRight="2"
									textAlign="right"
								>
									{error.message}
								</Box>
							)}
							<Button
								colorScheme="red"
								flex="0 0 auto"
								onClick={() =>
									mutate().catch((e) => {
										/* Discard errors here; we'll show them in the UI! */
									})
								}
								isLoading={loading}
							>
								Yes, remove permanently
							</Button>
						</ModalFooter>
					</ModalContent>
				</ModalOverlay>
			</Modal>
		</>
	);
}

const SWF_URL_PATTERN =
	/^https?:\/\/images\.neopets\.com\/cp\/(bio|items)\/swf\/(.+?)_([a-z0-9]+)\.swf$/;

function convertSwfUrlToPossibleManifestUrls(swfUrl) {
	const match = new URL(swfUrl, "https://images.neopets.com")
		.toString()
		.match(SWF_URL_PATTERN);
	if (!match) {
		throw new Error(`unexpected SWF URL format: ${JSON.stringify(swfUrl)}`);
	}

	const type = match[1];
	const folders = match[2];
	const hash = match[3];

	// TODO: There are a few potential manifest URLs in play! Long-term, we
	//       should get this from modeling data. But these are some good guesses!
	return [
		`https://images.neopets.com/cp/${type}/data/${folders}/manifest.json`,
		`https://images.neopets.com/cp/${type}/data/${folders}_${hash}/manifest.json`,
	];
}

export default AppearanceLayerSupportModal;