import React, { useState } from 'react'
import Player from './Player'
import PlayerForm from './PlayerForm'

const initialState = [
    { id: 1, name: 'Violeta', score: 5 },
    { id: 2, name: 'Danny', score: 3 },
    { id: 3, name: 'Irene', score: 11 },
    { id: 4, name: 'Rein', score: 3 },
]

function sortByHighScore(playerA, playerB) {
    return playerB.score - playerA.score
}

function sortByLowScore(playerA, playerB) {
    return playerA.score - playerB.score
}

function sortByName(playerA, playerB){
    return playerA.name.localeCompare(playerB.name)
}

export default function Scoreboard(){
    const [players, setPlayers] = useState(initialState)
    const [sortBy, setSortBy] = useState('highScore')
    
    // console.log('WHAT IS PLAYERS?', players)
    function addPlayer(name){
        // console.log('WHAT IS THE NEW PLAYER NAME:', name)
        const newPlayer = { name: name, id: players.length + 1, score: 0 }
        // console.log(newPlayer)
        const updatedPlayers = [...players, newPlayer]
        // console.log("UPDATED PLAYERS", updatedPlayers)
        setPlayers(updatedPlayers)
    }
    
    function incrementScoreOfPlayer(id){
        // console.log('ARE WE GETTING AN ID FROM THE PLAYER? ', id)
        const updatedPlayers = players.map(player => {
            // console.log('PLAYER IN MAP', player)
            if(id === player.id){
                // give player a point
                return {...player, score: player.score + 1}
            } else {
                // don't do anything
                return player
            }            
        })
        
        // console.log(updatedPlayers)
        setPlayers(updatedPlayers)
    }
    
    function changeSorting(event){
        // console.log("WHAT DID THE USER CHOOSE", event.target.value)
        setSortBy(event.target.value)
    }
    
    let sortedPlayers 
    
    if(sortBy === "highScore"){
        sortedPlayers = [...players]
            .sort(sortByHighScore)        
    } else if(sortBy === "name"){
        sortedPlayers = [...players]
            .sort(sortByName)
    } else if(sortBy === "lowScore"){
        sortedPlayers = [...players]
            .sort(sortByLowScore)
    } else {
        sortedPlayers = [...players]
            .sort(sortByScore)        
    }
    

        
    // console.log(sortedPlayers)
    
    console.log('WHAT ARE WE SORTING BY RIGHT NOW?', sortBy)

    
    return <div>
        <h4>Scoreboard</h4>
        <PlayerForm addPlayer={addPlayer}/>
        <br />
        <select onChange={changeSorting}>
            <option value="highScore">Sort by highest score</option>
            <option value="lowScore">Sort by lowest score</option>
            <option value="name">Sort by name</option>
        </select>
        { sortedPlayers.map((player) => {
            // console.log('WHAT IS 1 PLAYER', player)
            return <Player 
                key={player.id} 
                id={player.id}
                name={player.name} 
                score={player.score}
                incrementScoreOfPlayer={incrementScoreOfPlayer}
            />
        })}
    </div>
}