import styles from "styles/PlayerDisplay/Row.module.css";
// import { fetch } from "logger"
import Image from "next/image";
import RankIcon from "../rank/RankIcon";
import Emoji from "../Emoji";
// import Link from "next/link";
import { motion } from "framer-motion";
// import { FaTwitch, FaTwitter } from "react-icons/fa";
import { useRouter } from "next/router";
import Verified from "components/SVGs/Verified";
const PlayerDisplayRow = ({
  best_legend,
  isLink = true,
  name = undefined,
  brawlhalla_id,
  tier,
  rating,
  peak_rating,
  region,
  showRating = false,
  verified = false,
  rank,
  animate = false,
  socials = {},
  showLegend = true,
  showRank = true,
  showRegion = true,
  showPlacement = false,
  placement = 0,
  statsText = undefined,
  teamname,
  brawlhalla_id_one,
  brawlhalla_id_two,
  wins = 0,
  games = 0,
  clan = false,
  index = 0
}: props) => {
  const router = useRouter();
  const shouldNotAnimate = animate >= 8 || animate === false;
  // fetch.info({
  //     prefix: `Player Row`,
  //     message: `Displaying player: %c${name || teamname}`
  // })
  if (teamname) {
    isLink = false;
  }
  let teammate1 = teamname?.split("+")[0];
  let teammate2 = teamname?.split("+")[teamname.split("+").length - 1];
  let long_text_class: string | undefined = undefined;
  let text: string | undefined = name || teamname;
  if (text !== undefined) {
    if (text.length > 13) long_text_class = styles.long;
    // Really long text
    if (text.length > 20) long_text_class = styles.really_long;
    // Really Really long text
    if (text.length > 25) long_text_class = styles.really_really_long;
  }
  let elm = (
    <motion.div
      initial={{
        opacity: 0,
        x: 180,
      }}
      animate={{
        opacity: 1,
        x: 0,
      }}
      transition={{
        duration: shouldNotAnimate ? 0 : 1,
        delay: shouldNotAnimate ? 0 : 0.3 * animate,
        ease: "easeOut",
      }}
      className={styles.wrapper}
    >
      <div className={styles.content}>
        {showPlacement && (
          <span className={styles.placement}>{rank || placement}</span>
        )}
        {showLegend && best_legend && (
          <div className={styles.legend}>
            <Image
            loading={index >= 5 ? "eager" : "lazy"}
              width={128}
              height={128}
              alt="Legend Icon"
              src={`/assets/legends/${best_legend}.png`}
            />
          </div>
        )}
        {teamname && (
          <span className={`${styles.name} ${long_text_class || ""}`}>
            <a
              className={styles.teammate}
              href={`/player/${brawlhalla_id_one}`}
            >
              {teammate1}
            </a>
            {" & "}{" "}
            <a
              href={`/player/${brawlhalla_id_two}`}
              className={styles.teammate}
            >
              {teammate2}
            </a>
          </span>
        )}
        {name && !teamname && (
          <span className={`${styles.name} ${long_text_class || ""}`}>
            {/* {rank}. {" "} */}
            {name}
          </span>
        )}
        {verified ? (
          <span className={styles.verified_icon}>
            <Verified size="1.5rem" />{" "}
          </span>
        ) : null}
        {showRating ? (
          <span className={styles.stats}>
            {statsText ? (
              statsText
            ) : (
              <span>
                Rating: {rating} | Peak: {peak_rating} | Winrate:{" "}
                {Math.floor((wins * 100) / games)}%
              </span>
            )}
          </span>
        ) : null}
        <div className={styles.icons}>
          {showRank && (
            <span
              className={`tooltip ${styles.rank}`}
              data-tip={tier}
              data-tooltip-pos="left"
            >
              <RankIcon tier={tier} />
            </span>
          )}
          {showRegion && region && (
            <span
              className={`tooltip ${styles.region}`}
              data-tip={region?.toUpperCase()}
              data-tooltip-pos="left"
            >
              <Emoji
                parentSize={"inherit"}
                childSize="100%"
                alignCenter={false}
                element={region}
              />
            </span>
          )}
        </div>
      </div>
    </motion.div>
  );
  return isLink ? (
    <a onClick={(e) => {
      e.preventDefault();
      let url = `/${clan ? "clan" : "player"}/${brawlhalla_id}`
      router.push(url+"?animate=true", url);
    }}
    href={`/${clan ? "clan" : "player"}/${brawlhalla_id}`}
    style={{ marginBottom: "1.25rem" }}>
      {elm}
    </a>
  ) : (
    elm
  );
};
interface props {
  best_legend?: number;
  isLink?: boolean;
  name?: string;
  brawlhalla_id?: number;
  animate?: number;
  index: number;
  // For each of the following tiers below
  // Add the tier name followed by a 0 and repeat for each tier till 5
  // Tin
  // Bronze
  // Silver
  // Gold
  // Platinum
  // Diamond
  tier?:
    | "Tin 0"
    | "Tin 1"
    | "Tin 2"
    | "Tin 3"
    | "Tin 4"
    | "Tin 5"
    | "Bronze 0"
    | "Bronze 1"
    | "Bronze 2"
    | "Bronze 3"
    | "Bronze 4"
    | "Bronze 5"
    | "Silver 0"
    | "Silver 1"
    | "Silver 2"
    | "Silver 3"
    | "Silver 4"
    | "Silver 5"
    | "Gold 0"
    | "Gold 1"
    | "Gold 2"
    | "Gold 3"
    | "Gold 4"
    | "Gold 5"
    | "Platinum 0"
    | "Platinum 1"
    | "Platinum 2"
    | "Platinum 3"
    | "Platinum 4"
    | "Platinum 5"
    | "Diamond";
  rating?: number;
  peak_rating?: number;
  region?: "all" | "eu" | "us-e" | "us-w" | "sea" | "aus" | "brz" | "jpn";
  showRating?: boolean;
  verified?: boolean;
  rank?: number;
  socials?: {
    twitter?: string;
    youtube?: string;
  };
  showLegend?: boolean;
  showRank?: boolean;
  showRegion?: boolean;
  showPlacement?: boolean;
  placement: number;
  statsText?: string;
  teamname?: string;
  brawlhalla_id_one?: number;
  brawlhalla_id_two?: number;
  games?: number;
  clan?: boolean;
  wins?: number;
}
export default PlayerDisplayRow;