/* eslint-disable react/jsx-key */
import React from "react";
import "../styles/Admin.css";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from "@mui/material";



class AdminTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            users: [
                { id: 1, username: "username1", name: "name1", email: "user1@email.com", phone: "123-456-7890" },
                { id: 2, username: "username2", name: "name2", email: "user2@email.com", phone: "123-456-7890" },
                { id: 3, username: "username3", name: "name3", email: "user3@email.com", phone: "123-456-7890" },
                { id: 4, username: "username4", name: "name4", email: "user4@email.com", phone: "123-456-7890" }
            ],
            suspendedUsers: [
                { id: 1, username: "suspended1", name: "s1", email: "s1@email.com", phone: "123-456-7890" },
                { id: 2, username: "suspended2", name: "s2", email: "s2@email.com", phone: "123-456-7890" },
                { id: 3, username: "suspended3", name: "s3", email: "s3@email.com", phone: "123-456-7890" },
                { id: 4, username: "suspended4", name: "s4", email: "s4@email.com", phone: "123-456-7890" }
            ],
            matches: [
                { id: 1, sport: "Tennis", date: "08/08/2021", location: "toronto", description: "Tennis match" },
                { id: 2, sport: "Basketball", date: "09/09/2021", location: "toronto", description: "Basketball match" }
            ],
            buttonColors: ["black", "", ""]
        };
    }

    EditButton() {
        return <Button onClick={() => {
            alert("clicked");
        }} variant="contained">Edit</Button>;

    }

    DeleteButtonClick() {
        return (
            <Container component="main" maxWidth="xs">

                <Typography>Are you sure you want to delete this user?</Typography>
                <Button onClick={() => {
                    alert("User deleted");
                }} variant="contained">Yes</Button>
            </Container>
        );
    }

    NewDeleteButtonClick() {
        return (<form onSubmit="console.log('You clicked submit.'); return false">
            <button type="submit">Submit</button>
        </form>);
    }

    DeleteButton() {
        return <Button onClick={() => {
            alert("User deleted.");
        }} variant="contained">Delete</Button>;

    }

    PardonButton() {
        return <Button onClick={() => {
            alert("User pardoned.");
        }} variant="contained">Pardon</Button>;

    }

    userTableData() {
        return this.state.users.map((user) => {
            const { id, username, name, email, phone } = user;
            return (

                <TableRow key={user.id}>
                    <TableCell>{username}</TableCell>
                    <TableCell>{id}</TableCell>
                    <TableCell>{name}</TableCell>
                    <TableCell>{email}</TableCell>
                    <TableCell>{phone}</TableCell>
                    <TableCell>{this.DeleteButton()}</TableCell>
                    <TableCell>{this.EditButton()}</TableCell>
                </TableRow>
            );
        });
    }

    suspendedUserTableData() {
        return this.state.suspendedUsers.map((user) => {
            const { id, username, name, email, phone } = user;
            return (
                <TableRow key={user.id}>
                    <TableCell >{id}</TableCell>
                    <TableCell >{username}</TableCell>
                    <TableCell >{name}</TableCell>
                    <TableCell >{email}</TableCell>
                    <TableCell >{phone}</TableCell>
                    <TableCell >{this.DeleteButton()}</TableCell>
                    <TableCell >{this.EditButton()}</TableCell>
                    <TableCell >{this.PardonButton()}</TableCell>
                </TableRow>
            );
        });
    }

    matchTableData() {
        return this.state.matches.map((match) => {
            const { id, sport, date, location, description } = match;
            return (
                <TableRow key={match.id}>
                    <TableCell>{id}</TableCell>
                    <TableCell>{sport}</TableCell>
                    <TableCell>{date}</TableCell>
                    <TableCell>{location}</TableCell>
                    <TableCell>{description}</TableCell>
                    <TableCell>{this.DeleteButton()}</TableCell>
                    <TableCell>{this.EditButton()}</TableCell>
                </TableRow>
            );
        });
    }

    matchTableHead() {
        return (
            <TableHead>
                <TableRow>
                    <TableCell>ID</TableCell>
                    <TableCell>Sport</TableCell>
                    <TableCell>Date</TableCell>
                    <TableCell>Location</TableCell>
                    <TableCell>Description</TableCell>
                    <TableCell></TableCell>
                    <TableCell></TableCell>
                </TableRow>
            </TableHead>
        );

    }

    suspendedUserTableHead() {
        return (
            <TableHead>
                <TableRow>
                    <TableCell>ID</TableCell>
                    <TableCell>Username</TableCell>
                    <TableCell>Name</TableCell>
                    <TableCell>Email</TableCell>
                    <TableCell>Phone</TableCell>
                    <TableCell></TableCell>
                    <TableCell></TableCell>
                    <TableCell></TableCell>
                </TableRow>
            </TableHead>
        );

    }

    userTableHead() {
        return (
            <TableHead>
                <TableRow>
                    <TableCell>ID</TableCell>
                    <TableCell>Username</TableCell>
                    <TableCell>Name</TableCell>
                    <TableCell>Email</TableCell>
                    <TableCell>Phone</TableCell>
                    <TableCell></TableCell>
                    <TableCell></TableCell>
                </TableRow>
            </TableHead>
        );

    }


    selectTable() {
        this.setState({ buttonColors: ["", "", ""] });
    }

    renderTableHead() {
        if (this.state.buttonColors[0] === "black") {
            return this.matchTableHead();
        } else if (this.state.buttonColors[1] === "black") {
            return this.userTableHead();
        } else {
            return this.suspendedUserTableHead();
        }
    }

    renderTableData() {
        if (this.state.buttonColors[0] === "black") {
            return this.matchTableData();
        } else if (this.state.buttonColors[1] === "black") {
            return this.userTableData();
        } else {
            return this.suspendedUserTableData();
        }

    }

    // render() { return (<h1>RANDOM TEXT</h1>); }


    render() {
        return (

            <div>
                <h1 id='title'>Administration</h1>
                <div className='ButtonList'>
                    <Button onClick={() => {
                        this.setState({ buttonColors: ["black", "", ""] });
                    }} sx={{
                        margin: 3,
                        backgroundColor: this.state.buttonColors[0],
                    }} variant="outlined">Matches</Button>
                    <Button onClick={() => {
                        this.setState({ buttonColors: ["", "black", ""] });
                    }} sx={{
                        margin: 3,
                        backgroundColor: this.state.buttonColors[1],
                    }} variant="outlined">Users</Button>
                    <Button onClick={() => {
                        this.setState({ buttonColors: ["", "", "black"] });
                    }} sx={{
                        margin: 3,
                        backgroundColor: this.state.buttonColors[2],
                    }} variant="outlined">Suspended Users</Button></div>
                <div className='MainTable'>
                    <TableContainer
                        component={Paper}
                        variant="outlined"
                    >
                        <Table>
                            {this.renderTableHead()}
                            <TableBody>
                                {this.renderTableData()}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </div>
            </div>

        );
    }
}

export default AdminTable;