chellaris-galaxy-political-compass/components/gui/client/game-info-tabs.tsx

'use client';
import { Ethic, Game, GameData, GameGroup } from "@/types/stellaris";
import { Dispatch, Key, SetStateAction, Suspense, useEffect, useState } from 'react';
import { Empire } from '../../../types/stellaris';
import { generateUrl } from "@/components/server/fetchers";

type SelectionType = "all" | Set<Key>;

export const GameInfoTabs = (
  props: {
    game: Game,
    groups: GameGroup[]
  }) => {

  const [currentTab, setCurrentTab] = useState(1);

  // won't work with a class, needs to be a type
  const [gameData, setGameData] = useState({info: props.game, groups: props.groups, empires: new Array<Empire>});

  useEffect(() => {
    const getEmpires = async () => {
      const tmpEmpires = await fetch(
        generateUrl('/empires', [
          //{ key: "group_id", val: this.gr }, // TODO: wait for firq to implement multi calls, for now return all empires in game and manual parse
          { key: "group_game_id", val: gameData.info.id },]
        )).then((res) => res.json());
    
      let empires: Empire[] = []
    
      tmpEmpires.forEach((empire: Empire) => {
        if (gameData.groups.map(group => group.id).includes(empire.group_id)) {
          empires.push(empire)
        }
      });
      return empires;
    }
    
    const fetchData = async () => {
      let tmpData = gameData
      tmpData.groups = props.groups;
      tmpData.empires = await getEmpires();
      setGameData((prevGameData) => ({
        ...prevGameData,
        groups: tmpData.groups,
        empires: tmpData.empires
      }));
    }

    if (gameData.groups != props.groups) {
      fetchData()
    }
  }, [gameData, props.groups])

  let currentTabView;
  switch (currentTab) {
    case (1):
    case (2): {
      currentTabView = <p>{currentTab}</p>
      break;
    }
    case (3): {
      const gestaltSums = getGestaltCount(gameData.empires, 13);
      currentTabView =
        <div className="col">
          <p>Legacy View for {props.groups.length > 1 ? "Groups" : "Group"} {props.groups.map(elem => elem.name).join(", ")}</p>
          <p>Empires: {gameData.empires.length}</p>
          <div className="row">
            <p>Ethics</p>
            <div className="col">
              <p>Total Gestalts: {gestaltSums.total}</p>
              Hive Minds: {gestaltSums.total - gestaltSums.machines}
              <br></br>
              Machines: {gestaltSums.machines}
              <br></br>
              <p>Machine Ethics</p>
            </div>
          </div>
          <div className="col">
            <div className="row">
              <p>Portrait 1</p>
              <p>Portrait 2</p>
              <p>Portrait 3</p>
            </div>
            <div className="row">
              <p>Portrait 1</p>
              <p>Portrait 2</p>
              <p>Portrait 3</p>
            </div>
          </div>
        </div>;
      break;
    }
    default:
      currentTabView = <p>Oops, something went wrong</p>
  }

  return (
    <>
      <div className="row">
        <button key={1} onClick={() => setCurrentTab(_currentTab => 1)}>
          Tab 1
        </button>
        <button key={2} onClick={() => setCurrentTab(_currentTab => 2)}>
          Tab 2
        </button>
        <button key={3} onClick={() => setCurrentTab(_currentTab => 3)}>
          Legacy Visuals
        </button>
      </div>
      {currentTabView}
    </>
  )
}

function getEthicSum(ethic: Ethic, empires: Empire[]) {
  let sum = 0;
  empires.forEach(empire => { empire.ethic_ids.includes(ethic.id) ? sum = sum + 1 : sum });
  return sum;
}

function getGestaltCount(empires: Empire[], machineId: number) {
  let sum = 0;
  let sumMachines = 0;

  empires.forEach(empire => { 
    if(empire.gestalt) {
      if(empire.empire_portrait_group_id == machineId) {
        sumMachines = sumMachines + 1;
        sum = sum + 1;
      }
      else {
        sum = sum + 1
      }
      
    }});
  return {total: sum, machines: sumMachines}
}