import React from "react";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

import * as HoverCard from "@radix-ui/react-hover-card";

import WeaponLabelIcon from "~components/WeaponLabelIcon";
import UncapIndicator from "~components/UncapIndicator";

import "./index.scss";

interface Props {
  gridCharacter: GridCharacter;
  children: React.ReactNode;
}

interface KeyNames {
  [key: string]: {
    en: string;
    jp: string;
  };
}

const CharacterHovercard = (props: Props) => {
  const router = useRouter();
  const { t } = useTranslation("common");
  const locale =
    router.locale && ["en", "ja"].includes(router.locale)
      ? router.locale
      : "en";

  const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"];
  const Proficiency = [
    "none",
    "sword",
    "dagger",
    "axe",
    "spear",
    "bow",
    "staff",
    "fist",
    "harp",
    "gun",
    "katana",
  ];

  const tintElement = Element[props.gridCharacter.object.element];
  const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll(
    " ",
    "_"
  )}`;

  function characterImage() {
    let imgSrc = "";

    if (props.gridCharacter) {
      const character = props.gridCharacter.object;

      // Change the image based on the uncap level
      let suffix = "01";
      if (props.gridCharacter.uncap_level == 6) suffix = "04";
      else if (props.gridCharacter.uncap_level == 5) suffix = "03";
      else if (props.gridCharacter.uncap_level > 2) suffix = "02";

      imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_${suffix}.jpg`;
    }

    return imgSrc;
  }

  return (
    <HoverCard.Root>
      <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
      <HoverCard.Content className="Weapon Hovercard">
        <div className="top">
          <div className="title">
            <h4>{props.gridCharacter.object.name[locale]}</h4>
            <img
              alt={props.gridCharacter.object.name[locale]}
              src={characterImage()}
            />
          </div>
          <div className="subInfo">
            <div className="icons">
              <WeaponLabelIcon
                labelType={Element[props.gridCharacter.object.element]}
              />
              <WeaponLabelIcon
                labelType={
                  Proficiency[
                    props.gridCharacter.object.proficiency.proficiency1
                  ]
                }
              />
              {props.gridCharacter.object.proficiency.proficiency2 ? (
                <WeaponLabelIcon
                  labelType={
                    Proficiency[
                      props.gridCharacter.object.proficiency.proficiency2
                    ]
                  }
                />
              ) : (
                ""
              )}
            </div>
            <UncapIndicator
              type="character"
              ulb={props.gridCharacter.object.uncap.ulb || false}
              flb={props.gridCharacter.object.uncap.flb || false}
              special={false}
            />
          </div>
        </div>

        <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
          {t("buttons.wiki")}
        </a>
        <HoverCard.Arrow />
      </HoverCard.Content>
    </HoverCard.Root>
  );
};

export default CharacterHovercard;