import React, { useState, useEffect } from 'react';
import { Table, DropdownButton, Dropdown, Button } from 'react-bootstrap';
import './css/tablecontent.css';
import axios from 'axios';

const LeaguesTable = ({ data = null, showLeagueDetail, setShowCreateLeagueForm }) => {

    const [isAdmin, setIsAdmin] = useState(false);

    const handleCreateLeague = () => setShowCreateLeagueForm(true);
    const [usersTeamId, setUsersTeamId] = useState();

    const getUsersTeamId = () => {
        const json = JSON.stringify();

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

    const joinLeague = (leagueId) => {

    };

    const leaveLeague = (leagueId) => {

    };

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

    if (data != null) {
        return (
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th className='center-column-text'>Start Date</th>
                        <th className='center-column-text'>End Date</th>
                        <th className='center-column-text'>Detail</th>
                        <th className='center-column-text'>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        data.map((league) => {
                            let end = new Date(league.endDate);
                            let start = new Date(league.startDate);

                            if (Date.now() < start.getTime()) {
                                if (usersTeamId !== null) {
                                    return (
                                        <tr key={league.id}>
                                            <td>{league.name}</td>
                                            <td className='center-column-text'>{league.startDate}</td>
                                            <td className='center-column-text'>{league.endDate}</td>
                                            <td className='center-column-text'>
                                                <Button variant="secondary" onClick={() => showLeagueDetail(league)}>Show</Button>
                                            </td>
                                            <td className='center-column-text'>
                                                <DropdownButton id="dropdown-basic-button" title="Select action" variant='secondary'>
                                                    <Dropdown.Item href={"/teams" + league.id}>Show teams</Dropdown.Item>
                                                    <Dropdown.Item href="/players">Show players</Dropdown.Item>
                                                </DropdownButton>
                                            </td>
                                        </tr>
                                    )
                                } else {
                                    return (
                                        <tr key={league.id}>
                                            <td>{league.name}</td>
                                            <td className='center-column-text'>{league.startDate}</td>
                                            <td className='center-column-text'>{league.endDate}</td>
                                            <td className='center-column-text'>
                                                <Button variant="secondary" onClick={() => showLeagueDetail(league)}>Show</Button>
                                            </td>
                                            <td className='center-column-text'>
                                                <Dropdown.Item href={"/teams" + league.id}>Show teams</Dropdown.Item>
                                            </td>
                                        </tr>
                                    )
                                }
                            }
                            else if (start.getTime() < Date.now() && Date.now() < end.getTime()) {
                                if (usersTeamId !== null) {
                                    return (
                                        <tr key={league.id}>
                                            <td>{league.name}</td>
                                            <td className='center-column-text'>{league.startDate}</td>
                                            <td className='center-column-text'>{league.endDate}</td>
                                            <td className='center-column-text'>
                                                <Button variant="secondary" onClick={() => showLeagueDetail(league)}>Show</Button>
                                            </td>
                                            <td className='center-column-text'>
                                                <DropdownButton id="dropdown-basic-button" title="Select action" variant='secondary'>
                                                    <Dropdown.Item href="/players">Show players</Dropdown.Item>
                                                    <Dropdown.Item href={"/matches/" + league.id}>Matches</Dropdown.Item>
                                                </DropdownButton>
                                            </td>
                                        </tr>
                                    )
                                } else {
                                    return (
                                        <tr key={league.id}>
                                            <td>{league.name}</td>
                                            <td className='center-column-text'>{league.startDate}</td>
                                            <td className='center-column-text'>{league.endDate}</td>
                                            <td className='center-column-text'>
                                                <Button variant="secondary" onClick={() => showLeagueDetail(league)}>Show</Button>
                                            </td>
                                            <td className='center-column-text'>
                                                <Dropdown.Item href={"/matches/" + league.id}>Matches</Dropdown.Item>
                                            </td>
                                        </tr>
                                    )
                                }
                            }
                            else if (end.getTime() < Date.now()) {
                                return (
                                    <tr key={league.id}>
                                        <td>{league.name}</td>
                                        <td className='center-column-text'>{league.startDate}</td>
                                        <td className='center-column-text'>{league.endDate}</td>
                                        <td className='center-column-text'>
                                            <Button variant="secondary" onClick={() => showLeagueDetail(league)}>Show</Button>
                                        </td>
                                        <td className='center-column-text'>
                                            <DropdownButton id="dropdown-basic-button" title="Select action" variant='secondary'>
                                                <Dropdown.Item href={"/matches/" + league.id}>Matches</Dropdown.Item>
                                            </DropdownButton>
                                        </td>
                                    </tr>
                                )
                            }
                            else {
                                return (
                                    <tr key={league.id}>
                                        <td>{league.name}</td>
                                        <td className='center-column-text'>{league.startDate}</td>
                                        <td className='center-column-text'>{league.endDate}</td>
                                        <td className='center-column-text'>
                                            <Button variant="secondary" onClick={() => showLeagueDetail(league)}>Show</Button>
                                        </td>
                                        <td>
                                            -
                                        </td>
                                    </tr>
                                )
                            }
                        })
                    }
                </tbody >
            </Table >
        );
    }
}

export default LeaguesTable;