import './GameSelector.css';
import React from 'react';
import { useLocation, matchPath } from "react-router";

import { AppData } from "../../context/data"
import { AppContext } from "../../context/app"
import Proposal from './GameSelector/GameProposal';

export default function GameSelector() {
  const [data] = React.useContext(AppData)
  const [ctx, dispatchCtx] = React.useContext(AppContext)

  const { pathname } = useLocation();
  const isProposalPath = matchPath("/game/proposal/*", pathname);
  const isActivelPath  = matchPath("/game/active/*", pathname);
  const isArchivePath  = matchPath("/game/archive/*", pathname);

  console.log("GameSelector appCtx", ctx)

  const onClick_proposal = (selectedGame) => {
    dispatchCtx({ component: "game-selector", selectedGameProposal: selectedGame })
  }

  const onClick_active = (selectedGame) => {
    dispatchCtx({ component: "game-selector", selectedActiveGame: selectedGame })
  }
  
  const onClick_archive = (selectedGame) => {
    dispatchCtx({ component: "game-selector", selectedArchiveGame: selectedGame })
  }

  if (!data.games)
    return <div>Loading..</div>

  return (
    <div className='game-selector'>
      {isProposalPath && <Proposal games={data.games} onClick={onClick_proposal} />}
      {isActivelPath && <div>TBD #1</div>}
      {isArchivePath && <div>TBD #2</div>}
    </div>
  )
}