import {
  allClasses,
  Population,
  totalPopulation,
  World,
  Zone,
} from "../utils/saerro";
import { headerFont } from "./world.css";
import {
  chartTile,
  chartTileChart,
  chartTilePopImage,
  chartTilePopLine,
  chartTileTotal,
  classesContainer,
  zoneContainer,
  zoneHeader,
} from "./world-zone-container.css";
import { classIconMap } from "../utils/class-icons";
import { FactionBarSxS } from "./faction-bar-sxs";
import { c } from "../utils/classes";
import vsLogo from "../images/vs-100.png";
import ncLogo from "../images/nc-100.png";
import trLogo from "../images/tr-100.png";

export type WZCProps = {
  world: World;
  zone: Zone;
};

export const WorldZoneContainer = (props: WZCProps) => {
  return (
    <section className={zoneContainer} title={props.zone.name}>
      <div className={zoneHeader}>
        <h3 className={headerFont}>{props.zone.name.toUpperCase()}</h3>
        {/* TODO: metagame */}
      </div>
      <div>
        <h4 className={headerFont}>CLASSES</h4>
        <div style={{ display: "flex" }}>
          <Classes classes={props.zone.classes} />
          <div style={{ display: "flex", flex: "1 3 100%", flexWrap: "wrap" }}>
            &nbsp;
          </div>
          <div style={{ display: "flex", flex: "1 3 100%", flexWrap: "wrap" }}>
            &nbsp;
          </div>
        </div>
      </div>
    </section>
  );
};

const Classes = (props: { classes: Zone["classes"] }) => {
  if (props.classes === undefined) {
    return null;
  }

  return (
    <div className={classesContainer}>
      {allClasses.map((name) => (
        <ChartTile
          key={name}
          name={name}
          pop={(props.classes as Record<string, Population>)[name]}
        />
      ))}
    </div>
  );
};

const ChartTile = (props: { name: string; pop: Population }) => (
  <div className={chartTile}>
    <div className={chartTileChart}>
      <FactionBarSxS population={props.pop} />
      <img src={(classIconMap as any)[props.name]} />
    </div>
    <div>
      <div className={c(headerFont, chartTileTotal)}>
        {totalPopulation(props.pop)}
      </div>
      <div>
        <div className={chartTilePopLine}>
          <img className={chartTilePopImage} src={vsLogo} alt="VS" />{" "}
          {props.pop.vs}
        </div>
        <div className={chartTilePopLine}>
          <img className={chartTilePopImage} src={ncLogo} alt="NC" />{" "}
          {props.pop.nc}
        </div>
        <div className={chartTilePopLine}>
          <img className={chartTilePopImage} src={trLogo} alt="TR" />{" "}
          {props.pop.tr}
        </div>
      </div>
    </div>
  </div>
);