import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { authSlice } from '../features/auth/authSlice'

function IndexPage() {
 const { isAuthenticated } = useSelector(state => state.auth)
 const dispatch = useDispatch()

 const [selectedGame, setSelectedGame] = useState(null)

 const onGameSelected = (e) => {
    setSelectedGame(e.target.value)
 }

 const onLogin = (e) => {
    e.preventDefault()
    dispatch(authSlice.actions.login())
 }

 const onLogout = (e) => {
    e.preventDefault()
    dispatch(authSlice.actions.logout())
 }

 return (
    <div className="min-h-screen flex flex-col bg-[#121212] text-[#f0f0f0] font-roboto">
      <ul className="flex justify-end">
        <li>
          {
            isAuthenticated ? (
              <button className="bg-[#121212] text-[#f0f0f0] font- roboto border-[#f0f0f0] py-2 px-4 rounded-l" onClick={onLogout}>Logout</button>
            ) : (
              <button className="bg-[#121212] text-[#f0f0f0] font- roboto border-[#f0f0f0] py-2 px-4 rounded-l" onClick={onLogin}>Login</button>
            )
          }
        </li>
      </ul>
      {
        selectedGame ? (
          <>
            {/* The rest of the code will go here */}
          </>
        ) : (
          <select className="bg-[#121212] text-[#f0f0f0] font- roboto border-[#f0f0f0] py-2 px-4 rounded-l" onChange={onGameSelected} value={selectedGame}>
            <option value="">Select a game</option>
            {games.map(game => (
              <option key={game.key} value={game.key}>{game.label}</option>
            ))}
          </select>
        )
      }
    </div>
 )
}

export default IndexPage