import React from "react";
import { Button, Table } from "react-bootstrap";
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";
// import { apiClient } from "../utils/httpClients.js";
// import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
// import { needUser } from "../utils/routing.js";
export default class Admin 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", "", ""]
        };


    }

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

    }

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

    }

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

    }

    userTableHead() {
        return (
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
        );
    }

    matchTableHead() {
        return (
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Sport</th>
                    <th>Date</th>
                    <th>Location</th>
                    <th>Description</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
        );
    }


    userTableData() {
        return this.state.users.map((user) => {
            const { id, username, name, email, phone } = user;
            return (
                <tr key={id}>
                    <td>{id}</td>
                    <td>{username}</td>
                    <td>{name}</td>
                    <td>{email}</td>
                    <td>{phone}</td>
                    <td>{this.DeleteButton()}</td>
                    <td>{this.EditButton()}</td>
                </tr>
            );
        });
    }

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


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

    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.userTableHead();
        }
    }

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

    }



    render() {
        return (
            <React.Fragment>

                <div className='center'>
                    <h1 id='title'>Administration</h1>
                    <Button className='somespace' onClick={() => {
                        this.setState({ buttonColors: ["black", "", ""] });
                    }} sx={{
                        margin: 3,
                        backgroundColor: this.state.buttonColors[0],
                    }} variant="outline-secondary">Matches</Button>
                    <Button onClick={() => {
                        this.setState({ buttonColors: ["", "black", ""] });
                    }} sx={{
                        margin: 3,
                        backgroundColor: this.state.buttonColors[1],
                    }} variant="outline-secondary">Users</Button>
                    <Button onClick={() => {
                        this.setState({ buttonColors: ["", "", "black"] });
                    }} sx={{
                        margin: 3,
                        backgroundColor: this.state.buttonColors[2],
                    }} variant="outline-secondary">Suspended Users</Button></div>
                <Table striped bordered hover>
                    {this.renderTableHead()}
                    <tbody>
                        {this.renderTableData()}
                        {/* {this.matchUserTableData()} */}
                    </tbody>
                </Table>

            </React.Fragment>
        );
    }
}