'use client';
import { Game, GameGroup } from "@/types/stellaris";
import { Dropdown } from "@nextui-org/react";
import { Dispatch, Key, SetStateAction, Suspense, useState } from 'react';
import { fetchGameGroups } from "@/components/server/fetchers";
import { GameInfoHandler } from "./data-handlers/game-info-handler";

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

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

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

  let currentTabView;
  switch(currentTab) {
    case(1):
    case(2): {
      currentTabView = <p>{currentTab}</p>
      break;
    }
    case(3): {
      currentTabView = <GameInfoLegacyView game={props.game} groups={props.groups}/>
      break;
    }
    default:
      currentTabView = <p>Oops, something went wrong</p>
  }

  return (
    <>
      <Suspense>
        <GameInfoHandler game={props.game} groups={props.groups} />
      </Suspense>
      <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}
    </>
  )
}

const GameInfoLegacyView = (
  props: {
    game: Game,
    groups: GameGroup[]
  }
) => {
  return (
    <div>
      <p>Legacy View for {props.groups.length > 1 ? "Groups" : "Group"} {props.groups.map(elem => elem.name).join(", ")}</p>
    </div>
  )
}