import styles from "styles/PlayerDisplay/Column.module.css";
import Image from "next/image";
import RankIcon from "../rank/RankIcon";
import Emoji from "../Emoji";
// import Link from "next/link";
import { useRouter } from "next/router";
import { getRegionEmoji } from "helper";
import Verified from "components/SVGs/Verified";
const PlayerDisplayCard = ({
  best_legend,
  isLink = true,
  name = undefined,
  brawlhalla_id,
  tier,
  rating,
  peak_rating,
  region,
  showRating = false,
  verified = false,
  rank,
  socials = {},
  showLegend = true,
  showRank = true,
  showRegion = true,
  showPlacement = false,
  placement = 0,
  statsText = undefined,
  teamname = undefined,
  brawlhalla_id_one,
  brawlhalla_id_two,
  games = 0,
  wins = 0,
  clan = false,
  index = 0
}: props) => {
  let region_emoji: string | undefined = "";
  const router = useRouter();
  if (showRegion) {
    region_emoji = getRegionEmoji(region);
  }
  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 = (
    <div className={styles.card}>
      {showLegend && best_legend && (
        <div className={styles.image_container}>
          <div className={styles.image}>
            <Image
            loading={index >= 5 ? "eager" : "lazy"}
              width={128}
              height={128}
              alt="Legend Icon"
              src={`/assets/legends/${best_legend}.png`}
            />
          </div>
        </div>
      )}
      <div className={styles.content + ` ${teamname ? styles.team : ""}`}>
        <span className={styles.content_wrapper}>
          <h1 className={long_text_class ? long_text_class : ""}>
            {showPlacement && (
              <span className={styles.placement}>{rank || placement}.</span>
            )}{" "}
            {name && !teamname && name}
            {teamname && !name && (
              <div className={long_text_class ? long_text_class : ""}>
                <a
                  href={`/player/${brawlhalla_id_one}`}
                  className={styles.teammate}
                >
                  {teammate1}
                </a>
                <span className="text-white-500">
                  {" "}
                  {" | "} {"  "}
                </span>
                <a
                  href={`/player/${brawlhalla_id_two}`}
                  className={styles.teammate}
                >
                  {teammate2}
                </a>
              </div>
            )}
          </h1>
          {/* <br className="mt-5"/> */}
          {showRegion && region && (
            <span className={styles.region}>
              <Emoji parentSize="inherit" childSize="100%" element={region} />
            </span>
          )}
          {showRank && (
            <div className={styles.rank_parent}>
              <div className={styles.rank}>
                <RankIcon tier={tier} />
              </div>
            </div>
          )}
          {verified && (
            <span className="inline-block ml-2 mb-1">
              <Verified size="3rem" />
            </span>
          )}
          <br />
          {showRating ? (
            <span className={styles.stats}>
              {statsText ? (
                statsText
              ) : (
                <span>
                  Rating: {rating}
                  <br />
                  Peak: {peak_rating} <br />
                  Winrate: {Math.floor((wins * 100) / games)}%
                </span>
              )}
            </span>
          ) : null}
        </span>
      </div>
    </div>
  );
  return !isLink ? (
    elm
  ) : (
    <a
      onClick={(e) => {
        e.preventDefault();
        router.push(`/${clan ? "clan" : "player"}/${brawlhalla_id}`);
      }}
      href={`/${clan ? "clan" : "player"}/${brawlhalla_id}`}
    >
      {elm}
    </a>
  );
};

interface props {
  best_legend?: number;
  isLink?: boolean;
  name?: string;
  brawlhalla_id?: 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;
  clan?: boolean;
  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;
  wins?: number;
}

export default PlayerDisplayCard;