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

const TeamPlayersTable = ({ data = null, showPlayerDetails, setData }) => {

    const updatePlayer = (p, state) => {
        const json = JSON.stringify({
            id: p.id,
            dressNumber: p.dressNumber,
            name: p.name,
            height: p.height,
            weight: p.weight,
            team: p.team.id,
            position: p.position,
            state: state
        });

        axios.put('http://localhost:8080/pa165/players/' + p.id, json, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            }
        })
            .then(function (response) {
                // handle success
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            });
    }

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

    let seq = 0;
    return (
        <Table striped bordered hover>
            <thead>
                <tr>
                    <th className='center-column-text'>#</th>
                    <th>Name</th>
                    <th className='center-column-text'>Position</th>
                    <th className='center-column-text'>Status</th>
                    <th className='center-column-text'>Detail</th>
                    <th className='center-column-text'>Action</th>
                </tr>
            </thead>
            <tbody>
                {
                    data != null ?
                        data.map((player) => {
                            seq++;
                            return (
                                <tr key={player.id}>
                                    <th className='center-column-text'> {seq} </th>
                                    <th>{player.name}</th>
                                    <th className='center-column-text'>{player.position}</th>
                                    <td className='center-column-text'>
                                        <Form.Group className="mb-3" controlId="Team.StartDate">
                                            <Form.Select onChange={(e) => { updatePlayer(player, e.target.value); player.state = e.target.value }} defaultValue={player.state}>
                                                <option value={"ACTIVE"}>ACTIVE</option>
                                                <option value={"INACTIVE"}>INACTIVE</option>
                                            </Form.Select>
                                        </Form.Group>
                                    </td>
                                    <td className='center-column-text'>
                                        <Button variant="secondary" onClick={() => { showPlayerDetails(player) }}>Show</Button>
                                    </td>
                                    <td className='center-column-text'>
                                        <Button variant="secondary" onClick={() => { firePlayer(player) }}>Fire</Button>
                                    </td>
                                </tr>
                            );
                        })
                        :
                        <></>
                }
                <tr>
                    <td className='center-column-text'>-</td>
                    <td className='center-column-text'>-</td>
                    <td className='center-column-text'>-</td>
                    <td className='center-column-text'>
                        <Form.Group className="mb-3" controlId="Team.StartDate">
                            <Form.Select disabled onChange={() => { }} defaultValue={"INACTIVE"}>
                                <option value={"ACTIVE"}>ACTIVE</option>
                                <option value={"INACTIVE"}>INACTIVE</option>
                            </Form.Select>
                        </Form.Group>
                    </td>
                    <td className='center-column-text'>
                        <Button disabled variant="secondary">Show</Button>
                    </td>
                    <td className='center-column-text'>
                        <Button href="/freeplayers" variant="secondary">Free players</Button>
                    </td>
                </tr>
            </tbody >
        </Table >
    );
}

export default TeamPlayersTable;