import { Game } from "@/types/stellaris";
import { Dropdown } from "@nextui-org/react";
import { Dispatch, Key, SetStateAction, useState } from "react";

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

export const GameSelect = (props: { games: Game[], currentGame: Game | undefined, setCurrentGame: Dispatch<SetStateAction<Game>> }) => {
  const changeSelection = (keys: SelectionType) => {
    if (keys != "all") {
      props.games.forEach(game => {
        if (game.name == keys.keys().next().value) [
          props.setCurrentGame(game)
        ]
      })
    }
  }

  return (
    <Dropdown>
      <Dropdown.Button flat color="secondary" css={{ tt: "capitalize" }}>
        {props.currentGame ? props.currentGame.name : "-"}
      </Dropdown.Button>
      <Dropdown.Menu
        aria-label="Single selection actions"
        color="secondary"
        disallowEmptySelection
        selectionMode="single"
        selectedKeys={[props.currentGame ? props.currentGame.name : "-"]}
        onSelectionChange={changeSelection}
        items={props.games}
      >
        {props.games.map((item) => (
          <Dropdown.Item
            key={item.name}
            color="default"
          >
            {item.name}
          </Dropdown.Item>
        ))}
      </Dropdown.Menu>
    </Dropdown>
  )
}