import React, { useState } from 'react'
import {
    Paper,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableContainer,
    TablePagination,
    TableRow,
    IconButton,
    MenuItem,
    Tooltip,
    Icon,
} from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit'
import DeleteIcon from '@material-ui/icons/Delete'
import colors from '../../../assets/Color'
import useStyles from '../../../styles/Table'
import { Breadcrumb, SimpleCard } from 'app/components'

const columns = [
    {
        id: 'index',
        label: 'STT',
        align: 'center',
        minWidth: 80,
    },

    {
        id: 'user_created',
        label: 'Account',
        align: 'left',
        minWidth: 'auto',
    },
    {
        id: 'functions',
        label: 'Chức năng',
        align: 'left',
        minWidth: 140,
    },
    {
        id: 'actions',
        label: 'Action',
        align: 'left',
        minWidth: 'auto',
    },
    {
        id: 'IP',
        label: 'IP',
        align: 'left',
        minWidth: 140,
    },
    {
        id: 'date_created',
        label: 'Thời gian',
        align: 'left',
        minWidth: 'auto',
    },
    {
        id: 'result_logging',
        label: 'Kết quả',
        align: 'left',
        minWidth: 100,
    },
]

function TableList(props) {
    const classes = useStyles()
    const {
        data,
        handeChangeActive,
        removeItem,
        changeActive,
        setChangeActive,
        setPageIndex,
        setPageSize,
        pageIndex,
        totalRecords,
    } = props

    const handleChangePage = (event, newPage) => {
        setPageIndex(newPage)
    }
    const handleChangeRowsPerPage = (event) => {
        setPageSize(event.target.value)
    }

    return (
        <Paper className={classes.root}>
            <TableContainer className={classes.container}>
                <Table stickyHeader aria-label="sticky table">
                    <TableHead>
                        <TableRow>
                            {columns.map((column) => (
                                <TableCell
                                    key={column.id}
                                    align={'center'}
                                    style={{
                                        width: column.minWidth,
                                        backgroundColor: colors.headerTable,
                                    }}
                                >
                                    {column.label}
                                </TableCell>
                            ))}
                        </TableRow>
                    </TableHead>
                    <TableBody className={classes.columnTable}>
                        {data.map((row) => {
                            return (
                                <TableRow
                                    hover
                                    role="checkbox"
                                    tabIndex={-1}
                                    key={row.id}
                                >
                                    {columns.map((column) => {
                                        const avatar = row[column.id]

                                        return (
                                            <TableCell
                                                key={column.id}
                                                align={column.align}
                                            >
                                                {column.format ? (
                                                    <img
                                                        src={column.format(
                                                            avatar
                                                        )}
                                                        className={
                                                            classes.image
                                                        }
                                                    />
                                                ) : (
                                                    avatar
                                                )}
                                            </TableCell>
                                        )
                                    })}
                                </TableRow>
                            )
                        })}
                    </TableBody>
                </Table>
            </TableContainer>
            <TablePagination
                component="div"
                page={pageIndex}
                count={totalRecords}
                rowsPerPage={10}
                rowsPerPageOptions={[]}
                onChangePage={handleChangePage}
                onChangeRowsPerPage={handleChangeRowsPerPage}
            />
        </Paper>
    )
}

export default TableList