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

import * as React from "react";
import { ClassNames } from "@emotion/react";
import { Box, useColorModeValue, useDisclosure } from "@chakra-ui/react";
import { EditIcon } from "@chakra-ui/icons";
import AppearanceLayerSupportModal from "./AppearanceLayerSupportModal";
import { OutfitLayers } from "../../components/OutfitPreview";

function ItemSupportAppearanceLayer({
	item,
	itemLayer,
	biologyLayers,
	outfitState,
}) {
	const { isOpen, onOpen, onClose } = useDisclosure();

	const iconButtonBgColor = useColorModeValue("green.100", "green.300");
	const iconButtonColor = useColorModeValue("green.800", "gray.900");

	return (
		<ClassNames>
			{({ css }) => (
				<Box
					as="button"
					width="150px"
					textAlign="center"
					fontSize="xs"
					onClick={onOpen}
				>
					<Box
						width="150px"
						height="150px"
						marginBottom="1"
						boxShadow="md"
						borderRadius="md"
						position="relative"
					>
						<OutfitLayers visibleLayers={[...biologyLayers, itemLayer]} />
						<Box
							className={css`
								opacity: 0;
								transition: opacity 0.2s;

								button:hover &,
								button:focus & {
									opacity: 1;
								}

								/* On touch devices, always show the icon, to clarify that this is
             * an interactable object! (Whereas I expect other devices to
             * discover things by exploratory hover or focus!) */
								@media (hover: none) {
									opacity: 1;
								}
							`}
							background={iconButtonBgColor}
							color={iconButtonColor}
							borderRadius="full"
							boxShadow="sm"
							position="absolute"
							bottom="2"
							right="2"
							padding="2"
							alignItems="center"
							justifyContent="center"
							width="32px"
							height="32px"
						>
							<EditIcon
								boxSize="16px"
								position="relative"
								top="-2px"
								right="-1px"
							/>
						</Box>
					</Box>
					<Box>
						<Box as="span" fontWeight="700">
							{itemLayer.zone.label}
						</Box>{" "}
						<Box as="span" fontWeight="600">
							(Zone {itemLayer.zone.id})
						</Box>
					</Box>
					<Box>Neopets ID: {itemLayer.remoteId}</Box>
					<Box>DTI ID: {itemLayer.id}</Box>
					<AppearanceLayerSupportModal
						item={item}
						layer={itemLayer}
						outfitState={outfitState}
						isOpen={isOpen}
						onClose={onClose}
					/>
				</Box>
			)}
		</ClassNames>
	);
}

export default ItemSupportAppearanceLayer;