import React, { useState } from 'react'
import {
    Paper,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableContainer,
    TablePagination,
    TableRow,
    IconButton,
    MenuItem,
    Select,
    Modal,
    Fade,
    Grid,
    Backdrop,
    Link,
    Button,
    Tooltip,
    Icon,
} 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 { useHistory } from 'react-router-dom'
import useAuth from 'app/hooks/useAuth'
import { checkRole } from 'app/config/Function'
import DialogReason from 'app/components/dialog/DialogReason'
import AcceptStore from 'app/components/dialog/AcceptStore'
import UpdateTimeStore from 'app/components/dialog/UpdateTimeStore'
const columns = [
    {
        id: 'index',
        label: 'STT',
        align: 'center',
        minWidth: 50,
    },
    // {
    //     id: 'id',
    //     label: 'id',
    //     align: 'center',
    //     minWidth: 50,
    // },
    {
        id: 'merchant_name',
        label: 'Thuộc pháp nhân',
        align: 'left',
        minWidth: 160,
    },

    {
        id: 'store_name',
        label: 'Tên cây xăng',
        align: 'left',
        minWidth: 160,
    },
    {
        id: 'field',
        label: 'Trụ/vòi',
        align: 'left',
        minWidth: 80,
    },

    {
        id: 'address',
        label: 'Địa chỉ',
        align: 'left',
        minWidth: 160,
    },

    {
        id: 'connective',
        label: 'Người đại diện',
        align: 'left',
        minWidth: 140,
    },

    {
        id: 'provice_name',
        label: 'Tỉnh/Thành phố',
        align: 'left',
        minWidth: 120,
    },

    {
        id: 'date_expried',
        label: 'Ngày hết hạn',
        align: 'left',
        minWidth: 100,
    },
    {
        id: 'status_text',
        label: 'Trạng thái',
        align: 'left',
        minWidth: 120,
    },
]

function TableList(props) {
    const {
        data,
        handeChangeActive,
        removeItem,
        changeActive,
        setChangeActive,
        setPageIndex,
        setPageSize,
        pageIndex,
        totalRecords,
        permissions,
        acceptStoreSub,
        acceptUpdateTime,
    } = props
    const classes = useStyles()
    let history = useHistory()
    const [selected, setSelected] = useState({
        name: '',
        id: '',
        title: '',
        content: '',
    })
    const [openAccept, setOpenAccpet] = useState(false)
    const [openUpdate, setOpenUpdate] = useState(false)
    const [open, setOpen] = React.useState(false)
    const [openReason, setOpenReason] = useState(false)

    const { user } = useAuth()
    const handleChangePage = (event, newPage) => {
        setPageIndex(newPage)
    }
    const handleChangeRowsPerPage = (event) => {
        setPageSize(event.target.value)
    }
    const handleClose = () => {
        setOpen(false)
    }

    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>
                            ))}
                            {/* {checkRole(user, '/gas-station/changeStatus') && (
                                <TableCell
                                    style={{
                                        backgroundColor: colors.headerTable,
                                        width: 125,
                                    }}
                                >
                                    Trạng thái
                                </TableCell>
                            )} */}

                            <TableCell
                                style={{
                                    textAlign: 'center',
                                    backgroundColor: colors.headerTable,
                                    width: 160,
                                }}
                            >
                                Hành động
                            </TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody className={classes.columnTable}>
                        {data.map((row) => {
                            return (
                                <TableRow
                                    hover
                                    role="checkbox"
                                    tabIndex={-1}
                                    key={row.id}
                                >
                                    {columns.map((column) => {
                                        const imageUrl = row[column.id]
                                        return (
                                            <TableCell
                                                key={column.id}
                                                align={column.align}
                                            >
                                                {column.format ? (
                                                    <img
                                                        src={column.format(
                                                            imageUrl
                                                        )}
                                                        className={
                                                            classes.image
                                                        }
                                                    />
                                                ) : (
                                                    imageUrl
                                                )}
                                            </TableCell>
                                        )
                                    })}
                                    {/* 
                                    {checkRole(
                                        user,
                                        '/gas-station/changeStatus'
                                    ) && (
                                        <TableCell className={classes.border}>
                                            <Select
                                                variant={'outlined'}
                                                labelId="demo-simple-select-placeholder-label-label"
                                                id="demo-simple-select-placeholder-label"
                                                onChange={(e) =>
                                                    handeChangeActive(
                                                        row.id,
                                                        e.target.value
                                                    )
                                                }
                                                displayEmpty
                                                defaultValue={row.status}
                                                className={classes.formControl}
                                            >
                                                <MenuItem value={1}>
                                                    Hoạt động
                                                </MenuItem>
                                                <MenuItem value={2}>
                                                    Khóa
                                                </MenuItem>
                                            </Select>
                                        </TableCell>
                                    )} */}
                                    <TableCell>
                                        {/* {checkRole(
                                            user,
                                            '/gas-station/delete'
                                        ) ? (
                                            <Tooltip title="Xoá">
                                                <IconButton
                                                    onClick={() => {
                                                        setSelected({
                                                            ...row,
                                                            title: 'Xóa cây xăng',
                                                            content: `Bạn có muốn xóa cây xăng ${row.store_name} hay không?`,
                                                        })
                                                        setOpen(true)
                                                    }}
                                                    className={classes.button}
                                                    aria-label="Delete"
                                                >
                                                    <Icon color="error">
                                                        delete
                                                    </Icon>
                                                </IconButton>
                                            </Tooltip>
                                        ) : null}
                                        {checkRole(
                                            user,
                                            '/gas-station/update'
                                        ) ? (
                                            <Tooltip title="Cập nhật">
                                                <IconButton
                                                    onClick={() => {
                                                        history.push({
                                                            pathname:
                                                                '/gas-station/update',
                                                            state: row.id,
                                                        })
                                                    }}
                                                    className={classes.button}
                                                    aria-label="edit"
                                                >
                                                    <Icon color="primary">
                                                        edit
                                                    </Icon>
                                                </IconButton>
                                            </Tooltip>
                                        ) : null} */}

                                        {row.status == 1 && (
                                            <Tooltip title="Ngừng hoạt động">
                                                <IconButton
                                                    onClick={() => {
                                                        setSelected({
                                                            ...row,
                                                            title: 'Ngừng hoạt động cây xăng',
                                                            content: `Bạn có muốn ngừng hoạt động cây xăng ${row.store_name} hay không?`,
                                                        })
                                                        setOpen(true)
                                                    }}
                                                    className={classes.button}
                                                    aria-label="Delete"
                                                >
                                                    <Icon color="error">
                                                        stop_circle
                                                    </Icon>
                                                </IconButton>
                                            </Tooltip>
                                        )}

                                        {row.status == 5 && (
                                            <Tooltip title="Hoạt động">
                                                <IconButton
                                                    onClick={() => {
                                                        setSelected({
                                                            ...row,
                                                            title: 'Cho phép hoạt động cây xăng',
                                                            content: `Bạn có muốn cho phép hoạt động cây xăng ${row.store_name} hay không?`,
                                                        })
                                                        setOpenAccpet(true)
                                                    }}
                                                    className={classes.button}
                                                    aria-label="Delete"
                                                >
                                                    <Icon
                                                        style={{
                                                            color: '#00C65B',
                                                        }}
                                                    >
                                                        not_started
                                                    </Icon>
                                                </IconButton>
                                            </Tooltip>
                                        )}
                                        {row.status == 3 && (
                                            <Tooltip title="Phê duyệt">
                                                <IconButton
                                                    onClick={() => {
                                                        setSelected({
                                                            ...row,
                                                            title: 'Cho phép hoạt động cây xăng',
                                                            content: `Bạn có muốn cho phép hoạt động cây xăng ${row.store_name} hay không?`,
                                                        })
                                                        setOpenAccpet(true)
                                                    }}
                                                    className={classes.button}
                                                    aria-label="Delete"
                                                >
                                                    <Icon
                                                        style={{
                                                            color: '#00C65B',
                                                        }}
                                                    >
                                                        task_alt
                                                    </Icon>
                                                </IconButton>
                                            </Tooltip>
                                        )}

                                        {row.status == 1 || row.status == 0 ? (
                                            <Tooltip title="Điều chỉnh thời gian">
                                                <IconButton
                                                    onClick={() => {
                                                        setSelected({
                                                            ...row,
                                                        })
                                                        setOpenUpdate(true)
                                                    }}
                                                    className={classes.button}
                                                    aria-label="Delete"
                                                >
                                                    <Icon
                                                        style={{
                                                            color: '#00C65B',
                                                        }}
                                                    >
                                                        today
                                                    </Icon>
                                                </IconButton>
                                            </Tooltip>
                                        ) : null}

                                        <Tooltip title="Chi tiết">
                                            <IconButton
                                                onClick={() => {
                                                    history.push({
                                                        pathname:
                                                            '/gas-station/detail',
                                                        state: row.id,
                                                    })
                                                }}
                                                className={classes.button}
                                                aria-label="edit"
                                            >
                                                <Icon color="primary">
                                                    visibility
                                                </Icon>
                                            </IconButton>
                                        </Tooltip>
                                        {row.status == 4 && (
                                            <Tooltip title="Lý do từ chối ">
                                                <IconButton
                                                    onClick={() => {
                                                        setSelected({
                                                            ...row,
                                                        })
                                                        setOpenReason(true)
                                                    }}
                                                    className={classes.button}
                                                    aria-label="edit"
                                                >
                                                    <Icon
                                                        style={{
                                                            color: '#FF9500',
                                                        }}
                                                    >
                                                        info
                                                    </Icon>
                                                </IconButton>
                                            </Tooltip>
                                        )}
                                    </TableCell>
                                </TableRow>
                            )
                        })}
                    </TableBody>
                </Table>
            </TableContainer>
            <DialogTransition
                data={selected}
                open={open}
                handleClose={handleClose}
                onAgree={() => {
                    removeItem(selected)
                    handleClose()
                }}
            />

            <DialogReason
                data={selected}
                open={openReason}
                handleClose={() => {
                    setOpenReason(false)
                }}
                onAgree={() => {
                    handleClose()
                }}
            />

            <AcceptStore
                open={openAccept}
                handleClose={() => {
                    setOpenAccpet(false)
                }}
                onAgree={(forever, date) => {
                    setOpenAccpet(false)
                    acceptStoreSub(selected, forever, date)
                }}
            />

            <UpdateTimeStore
                data={selected}
                open={openUpdate}
                handleClose={() => {
                    setOpenUpdate(false)
                }}
                onAgree={(forever, date) => {
                    setOpenUpdate(false)
                    acceptUpdateTime(selected, forever, date)
                }}
            />

            <TablePagination
                component="div"
                page={pageIndex}
                count={totalRecords}
                rowsPerPage={10}
                rowsPerPageOptions={[]}
                onChangePage={handleChangePage}
                onChangeRowsPerPage={handleChangeRowsPerPage}
            />
        </Paper>
    )
}

export default TableList
