import * as React from 'react';
import './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>
                    <TableCell>{id}</TableCell>
                    <TableCell>{username}</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>
                    <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>
                    <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 (
            <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