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

const columns = [
    {
        id: 'index',
        label: 'STT',
        align: 'center',
        minWidth: 80,
    },
    {
        id: 'created_date',
        label: 'Thời gian',
        align: 'left',
        minWidth: 90,
    },

    {
        id: 'order_code',
        label: 'Mã hoá đơn',
        align: 'left',
        minWidth: 170,
    },

    {
        id: 'store_name',
        label: 'Cây xăng',
        align: 'left',
        minWidth: 160,
    },
    {
        id: 'type_payment',
        label: 'Phương thức thanh toán',
        align: 'left',
        minWidth: 105,
    },

    {
        id: 'price',
        label: 'Số tiền',
        align: 'left',
        minWidth: 80,
        isMonney: true,
    },
    {
        id: 'commission',
        label: 'Hoa hồng',
        align: 'left',
        minWidth: 80,
        isMonney: true,
    },
]

function TableList(props) {
    const classes = useStyles()
    const {
        data,
        handeChangeActive,
        removeItem,
        changeActive,
        setChangeActive,
        setPageIndex,
        setPageSize,
        pageIndex,
        totalRecords,
        customSelect,
        listSelected,
        setListSelected,
    } = props
    const [open, setOpen] = React.useState(false)

    const [selected, setSelected] = useState({
        name: '',
        id: '',
        title: '',
        content: '',
    })
    const handleChangePage = (event, newPage) => {
        setPageIndex(newPage)
    }
    const handleChangeRowsPerPage = (event) => {
        setPageSize(event.target.value)
    }
    const handleClose = () => {
        setOpen(false)
    }
    const onSelectAll = (event) => {
        let newSelectedItemId
        if (event.target.checked) {
            newSelectedItemId = data.map((row) => row.id)
        } else {
            newSelectedItemId = []
        }
        setListSelected(newSelectedItemId)
    }

    const selectedOne = (value, id) => {
        let newList
        if (!value) {
            newList = listSelected.filter((e) => e != id)
        } else {
            newList = listSelected.concat(id)
        }
        setListSelected(newList)
    }

    return (
        <Paper className={classes.root}>
            <TableContainer className={classes.container}>
                <Table stickyHeader aria-label="sticky table">
                    <TableHead>
                        <TableRow>
                            <TableCell
                                style={{
                                    width: 40,
                                    backgroundColor: colors.headerTable,
                                    color: 'white',
                                }}
                            >
                                <Checkbox
                                    onChange={onSelectAll}
                                    checked={
                                        listSelected.length === data.length
                                    }
                                    className={classes.checkbox}
                                    disabled={
                                        listSelected.length > 0 &&
                                        listSelected.length < data.length
                                    }
                                    indeterminate={
                                        listSelected.length > 0 &&
                                        listSelected.length < data.length
                                    }
                                    color={'primary'}
                                />
                            </TableCell>
                            {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}
                                >
                                    <TableCell className={classes.border}>
                                        <Checkbox
                                            checked={listSelected.includes(
                                                row.id
                                            )}
                                            onChange={(event) =>
                                                selectedOne(
                                                    event.target.checked,
                                                    row.id
                                                )
                                            }
                                            color={'primary'}
                                            className={classes.checkbox}
                                        />
                                    </TableCell>

                                    {columns.map((column) => {
                                        const data = row[column.id]
                                        return (
                                            <TableCell
                                                key={column.id}
                                                align={column.align}
                                                style={{
                                                    textAlign:
                                                        column.id === 'index'
                                                            ? 'center'
                                                            : typeof data ==
                                                              'string'
                                                            ? 'left'
                                                            : 'right',
                                                }}
                                            >
                                                {column.isMonney
                                                    ? toPriceVnd(data)
                                                    : data}
                                            </TableCell>
                                        )
                                    })}
                                </TableRow>
                            )
                        })}
                    </TableBody>
                </Table>
            </TableContainer>
        </Paper>
    )
}

export default TableList
