import React from "react";
import { Box, VStack } from "@chakra-ui/react";
import { WarningTwoIcon } from "@chakra-ui/icons";
import { FaBug } from "react-icons/fa";
import { GlitchBadgeLayout, layerUsesHTML5 } from "../components/HTML5Badge";

function OutfitKnownGlitchesBadge({ appearance }) {
  const glitchMessages = [];

  const { petAppearance, items } = appearance;

  // Look for UC/Invisible/etc incompatibilities that we hid, that we should
  // just mark Incompatible someday instead.
  //
  // HACK: Most of this logic is copy-pasted from `useOutfitAppearance`.
  const petOccupiedZoneIds = new Set(
    petAppearance?.layers.map((l) => l.zone.id)
  );
  const petRestrictedZoneIds = new Set(
    petAppearance?.restrictedZones.map((z) => z.id)
  );
  const petOccupiedOrRestrictedZoneIds = new Set([
    ...petOccupiedZoneIds,
    ...petRestrictedZoneIds,
  ]);
  for (const item of items) {
    const itemHasZoneRestrictedByPet = item.appearance.layers.some(
      (layer) =>
        layer.bodyId !== "0" &&
        petOccupiedOrRestrictedZoneIds.has(layer.zone.id)
    );
    if (itemHasZoneRestrictedByPet) {
      glitchMessages.push(
        <Box key={`uc-conflict-for-item-${item.id}`}>
          <i>{item.name}</i> isn't actually compatible with this special pet.
          We're still showing the old behavior, which is to hide the item.
          Fixing this is in our todo list, sorry for the confusing UI!
        </Box>
      );
    }
  }

  // Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch.
  for (const item of items) {
    const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) =>
      (l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT")
    );
    if (itemHasOfficialSvgIsIncorrect) {
      glitchMessages.push(
        <Box key={`official-svg-is-incorrect-for-item-${item.id}`}>
          There's a glitch in the art for <i>{item.name}</i> that prevents us
          from showing the full-scale SVG version of the image. Instead, we're
          showing a PNG, which might look a bit blurry on larger screens.
        </Box>
      );
    }
  }

  // Look for Dyeworks items that aren't converted yet.
  for (const item of items) {
    const itemIsDyeworks = item.name.includes("Dyeworks");
    const itemIsConverted = item.appearance.layers.every(layerUsesHTML5);

    if (itemIsDyeworks && !itemIsConverted) {
      glitchMessages.push(
        <Box key={`unconverted-dyeworks-warning-for-item-${item.id}`}>
          <i>{item.name}</i> isn't converted to HTML5 yet, and our Classic DTI
          code often shows old Dyeworks items in the wrong color. Once it's
          converted, we'll display it correctly!
        </Box>
      );
    }
  }

  // Check whether the pet has OFFICIAL_SVG_IS_INCORRECT.
  const petLayers = petAppearance?.layers || [];
  for (const layer of petLayers) {
    const layerHasOfficialSvgIsIncorrect = (layer.knownGlitches || []).includes(
      "OFFICIAL_SVG_IS_INCORRECT"
    );
    if (layerHasOfficialSvgIsIncorrect) {
      glitchMessages.push(
        <Box key={`official-svg-is-incorrect-for-pet-layer-${layer.id}`}>
          There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
          zone that prevents us from showing the full-scale SVG version of the
          image. Instead, we're showing a PNG, which might look a bit blurry on
          larger screens.
        </Box>
      );
    }
  }

  if (glitchMessages.length === 0) {
    return null;
  }

  return (
    <GlitchBadgeLayout
      aria-label="Has known glitches"
      tooltipLabel={
        <Box>
          <Box as="header" fontWeight="bold" fontSize="sm" marginBottom="1">
            Known glitches
          </Box>
          <VStack spacing="1em">{glitchMessages}</VStack>
        </Box>
      }
    >
      <WarningTwoIcon fontSize="xs" marginRight="1" />
      <FaBug />
    </GlitchBadgeLayout>
  );
}

export default OutfitKnownGlitchesBadge;