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

const TeamsTable = ({ data = null, showTeamDetails, setShowCreateTeamForm, setData, setAlertType, setAlertMessage, setShowAlert }) => {
    const [isAdmin, setIsAdmin] = useState(false);
    const [userData, setUserData] = useState(false);

    const handleCreateTeam = () => setShowCreateTeamForm(true);

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

    const joinTeam = (team) => {
        axios.post('http://localhost:8080/pa165/teams/' + team.id + '/' + localStorage.getItem("userId"), {}, {
            headers: {
                'accept': '*/*',
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            }
        })
            .then(function (response) {
                setData(null);
                getUser();
            })
            .catch(function (error) {
                setAlertType(1);
                setAlertMessage(error.response.data.detail);
                setShowAlert(true);
            });
    }

    const leaveTeam = (team) => {
        axios.put('http://localhost:8080/pa165/users/' + localStorage.getItem("userId") + '/team', {},
            {
                headers: {
                    'accept': '*/*',
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            })
            .then(function (response) {
                setData(null);
                getUser();
            })
            .catch(function (error) { });
    }

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

    return (
        <Table striped bordered hover>
            <thead>
                <tr>
                    <th>Name</th>
                    <th className='center-column-text'>Assigned to</th>
                    <th className='center-column-text'>Detail</th>
                    <th className='center-column-text'>Action</th>
                </tr>
            </thead>
            <tbody>
                {
                    isAdmin ?
                        <tr>
                            <th></th>
                            <th></th>
                            <td className='center-column-text'>
                                <Button variant="secondary" disabled>Show</Button>
                            </td>
                            <td className='center-column-text'>
                                <Button onClick={handleCreateTeam} variant="secondary">Create team</Button>
                            </td>
                        </tr> : <></>
                }
                {
                    data != null ?
                        data.map((team) => {
                            if (team.user !== null) {
                                if (team.user.id == localStorage.getItem("userId")) {
                                    return (
                                        <tr key={team.id}>
                                            <th>{team.name}</th>
                                            <th className='center-column-text'>{team.user.name}</th>
                                            <th className='center-column-text'>
                                                <Button variant="secondary" onClick={() => { showTeamDetails(team) }}>Show</Button>
                                            </th>
                                            <th className='center-column-text'>
                                                <Button variant="secondary" onClick={() => { leaveTeam(team) }}>Leave</Button>
                                            </th>
                                        </tr>
                                    );
                                } else {
                                    return (
                                        <tr key={team.id}>
                                            <th>{team.name}</th>
                                            <th className='center-column-text'>{team.user.name}</th>
                                            <th className='center-column-text'>
                                                <Button variant="secondary" onClick={() => { showTeamDetails(team) }}>Show</Button>
                                            </th>
                                            <th className='center-column-text'>
                                                <Button variant="secondary" disabled>Join</Button>
                                            </th>
                                        </tr>
                                    );
                                }
                            }
                            else if (userData.team === null) {
                                return (
                                    <tr key={team.id}>
                                        <th>{team.name}</th>
                                        <th className='center-column-text'>-</th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { showTeamDetails(team) }}>Show</Button>
                                        </th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { joinTeam(team) }}>Join</Button>
                                        </th>
                                    </tr>
                                );
                            }
                            else {
                                return (
                                    <tr key={team.id}>
                                        <th>{team.name}</th>
                                        <th className='center-column-text'>-</th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" onClick={() => { showTeamDetails(team) }}>Show</Button>
                                        </th>
                                        <th className='center-column-text'>
                                            <Button variant="secondary" disabled>Join</Button>
                                        </th>
                                    </tr>
                                );
                            }
                        })
                        :
                        <></>
                }
            </tbody >
        </Table >
    );
}

export default TeamsTable;