import React, { useState, useEffect } from 'react';
import { Table, Button } from 'react-bootstrap';
import axios from 'axios';

const PlayersTable = ({ data = null, showPlayerDetails, setShowCreatePlayerForm, setData }) => {
    const [isAdmin, setIsAdmin] = useState(false);
    const [usersTeamId, setUsersTeamId] = useState();

    const getUsersTeamId = () => {
        axios.get('http://localhost:8080/pa165/users/' + localStorage.getItem("userId"), {
            headers: {
                accept: "*/*",
                Authorization: 'Bearer ' + localStorage.getItem("token")
            }
        })
            .then(function (response) {
                setUsersTeamId(response.data.team.id);
            })
            .catch(function (error) { });
    }

    const hirePlayer = (playerId) => {
        axios.put('http://localhost:8080/pa165/teams/' + usersTeamId + '/add/' + playerId, {},
            {
                headers: {
                    'Content-Type': 'application/json',
                    'accept': '*/*',
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            })
            .then(function (response) {
                setData(null);
            })
            .catch(function (error) { });
    }

    const firePlayer = (playerId) => {
        axios.put('http://localhost:8080/pa165/teams/' + usersTeamId + '/remove/' + playerId, {},
            {
                headers: {
                    'accept': '*/*',
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            })
            .then(function (response) {
                setData(null);
            })
            .catch(function (error) { });
    }


    const handleCreatePlayer = () => setShowCreatePlayerForm(true);

    useEffect(() => {
        if (localStorage.getItem("isAdmin") == "true") {
            setIsAdmin(true);
            getUsersTeamId();
        } else {
            getUsersTeamId();
            setIsAdmin(false);
        }
    }, []);

    return (

        <Table striped bordered hover>
            <thead>
                <tr>
                    <th>Name</th>
                    <th className='center-column-text'>Position</th>
                    <th className='center-column-text'>Team</th>
                    <th className='center-column-text'>Detail</th>
                    <th className='center-column-text'>Action</th>
                </tr>
            </thead>
            <tbody>
                {
                    isAdmin ?
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <td className='center-column-text'>
                                <Button variant="secondary" disabled>Show</Button>
                            </td>
                            <td className='center-column-text'>
                                <Button onClick={handleCreatePlayer} variant="secondary">Create player</Button>
                            </td>
                        </tr>
                        :
                        <></>
                }
                {
                    data != null ?
                        data.map((player) => {
                            if (player.team === null && usersTeamId !== null) {
                                return (
                                    <tr key={player.id}>
                                        <th>{player.name}</th>
                                        <th className='center-column-text'>{player.position}</th>
                                        <th className='center-column-text'>-</th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { showPlayerDetails(player) }}>Show</Button>
                                        </th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { hirePlayer(player.id) }}>Hire</Button>
                                        </th>
                                    </tr>
                                );
                            }
                            else if (player.team === null && usersTeamId === null) {
                                return (
                                    <tr key={player.id}>
                                        <th>{player.name}</th>
                                        <th className='center-column-text'>{player.position}</th>
                                        <th className='center-column-text'>{player.team === null ? "-" : player.team.name}</th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { showPlayerDetails(player) }}>Show</Button>
                                        </th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" disabled>Hire</Button>
                                        </th>
                                    </tr>
                                );
                            }
                            else if (player.team.id === usersTeamId) {
                                return (
                                    <tr key={player.id}>
                                        <th>{player.name}</th>
                                        <th className='center-column-text'>{player.position}</th>
                                        <th className='center-column-text'>{player.team.name}</th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { showPlayerDetails(player) }}>Show</Button>
                                        </th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { firePlayer(player.id) }}>Fire</Button>
                                        </th>
                                    </tr>
                                );
                            }
                            else {
                                return (
                                    <tr key={player.id}>
                                        <th>{player.name}</th>
                                        <th className='center-column-text'>{player.position}</th>
                                        <th className='center-column-text'>{player.team.name}</th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { showPlayerDetails(player) }}>Show</Button>
                                        </th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" disabled>Hire</Button>
                                        </th>
                                    </tr>
                                );
                            }
                        })
                        :
                        <></>
                }
            </tbody >
        </Table >
    );
}

export default PlayersTable;