import React, { useState, useEffect } from 'react'
import {
    CircularProgress,
    Typography,
    FormControlLabel,
    Switch,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Button,
    Stack,
} from '@mui/material'
import MUIDataTable from 'mui-datatables'
import { chunk } from 'lodash'
import useAuth from 'app/hooks/useAuth'
import { useNavigate, useLocation } from 'react-router-dom'
import VisibilityIcon from '@mui/icons-material/Visibility'
import { Link } from 'react-router-dom'
import EditIcon from '@mui/icons-material/Edit'
import DeleteIcon from '@mui/icons-material/Delete'
import moment from 'moment'
import CustomerService from 'app/services/allThingsLocals/CustomerService'

function BusinessUsers(props) {
    const navigate = useNavigate()
    const location = useLocation()
    const [page, setPage] = useState(0)
    const [count, setCount] = useState(1)
    const [data, setData] = useState([['Loading Data...']])
    const [isLoading, setIsLoading] = useState(false)
    const [openDialogue, setOpenDialogue] = React.useState(false)
    const [deleteId, setDeleteId] = React.useState('')

    const handleClose = () => {
        setDeleteId('')
        setOpenDialogue(false)
    }

    const handleClickOpen = (e, id) => {
        e.preventDefault()

        console.log('ID: ', id)
        setDeleteId(id)
        setOpenDialogue(true)
    }

    useEffect(() => {
        getData()
    }, [])

    const getData = () => {
        setIsLoading(true)
        CustomerService.businessQuery({ search: '', page: 0, pageSize: 5 })
            .then((res) => {
                console.log('RES: ', res)
                setData(res.data)
                setIsLoading(false)
                setCount(res.total)
            })
            .catch((err) => console.log('ERR:', err))
    }

    // mock async function
    const xhrRequest = ({ page = 0, pageSize = 5, sortOrder, search }) => {
        return new Promise((resolve, reject) => {
            CustomerService.businessQuery({ search, page, pageSize, sortOrder })
                .then((res) => {
                    resolve({
                        data: res.data,
                        total: res.total,
                    })
                })
                .catch((err) => console.log('ERR:', err))
        })
    }

    const changePage = (tableState) => {
        setIsLoading(true)
        xhrRequest({
            page: tableState.page,
            pageSize: tableState.rowsPerPage,
            sortOrder: tableState.sortOrder,
            search: tableState.searchText,
        }).then((res) => {
            setData(res.data)
            setIsLoading(false)
            setPage(tableState.page)
            setCount(res.total)
        })
    }

    const columns = [
        {
            name: '_id',
            label: 'ID',
            options: {
                // filter: true,
                sort: true,
            },
        },
        {
            name: 'business',
            label: 'Business Detail',
            options: {
                sort: true,
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <>
                            <Button
                                size="small"
                                variant="contained"
                                onClick={(e) =>
                                    navigate(
                                        '/admin/business-detail/' +
                                            data[tableMeta.rowIndex]._id,
                                        {
                                            state: {
                                                data: data[tableMeta.rowIndex],
                                                prevPath: location.pathname,
                                            },
                                        }
                                    )
                                }
                            >
                                Business Detail
                            </Button>
                        </>
                    )
                },
            },
        },
        {
            name: 'name',
            label: 'Name',
            options: {
                // filter: true,
                sort: true,
            },
        },
        {
            name: 'email',
            label: 'Email',
            options: {
                // filter: true,
                sort: true,
            },
        },
        {
            name: 'business',
            label: 'Services',
            options: {
                sort: true,
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <>
                            <Button
                                size="small"
                                variant="contained"
                                onClick={(e) =>
                                    navigate(
                                        '/admin/user-services/' +
                                            data[tableMeta.rowIndex]._id,
                                        {
                                            state: {
                                                data: data[tableMeta.rowIndex],
                                                prevPath: location.pathname,
                                            },
                                        }
                                    )
                                }
                            >
                                Services
                            </Button>
                        </>
                    )
                },
            },
        },
        // {
        //     name: 'role',
        //     label: 'Role',
        //     options: {
        //         // filter: true,
        //         sort: true,
        //     },
        // },

        // {
        //     name: 'Icon',
        //     options: {
        //         sort: true,
        //         customBodyRender: (value, tableMeta, updateValue) => {
        //             return (
        //                 <a target="_blank" href={data[tableMeta.rowIndex].icon}>
        //                     <VisibilityIcon />
        //                 </a>
        //             )
        //         },
        //     },
        // },
        // {
        //     name: 'Actions',
        //     options: {
        //         sort: true,
        //         customBodyRender: (value, tableMeta, updateValue) => {
        //             return (
        //                 <>
        //                     <Link
        //                         to={`/admin/fleet-types/edit/${
        //                             data[tableMeta.rowIndex]._id
        //                         }`}
        //                         title="Edit Fleet Type"
        //                     >
        //                         <EditIcon />
        //                     </Link>

        //                     <Link
        //                         to="#"
        //                         title="Delete Fleet Type"
        //                         onClick={(e) =>
        //                             handleClickOpen(
        //                                 e,
        //                                 data[tableMeta.rowIndex]._id
        //                             )
        //                         }
        //                     >
        //                         <DeleteIcon />
        //                     </Link>
        //                 </>
        //             )
        //         },
        //     },
        // },
    ]

    const options = {
        responsive: 'simple',
        // filters: false,
        filter: false,
        // filterType: 'dropdown',

        jumpToPage: true,
        rowsPerPage: 5,
        rowsPerPageOptions: [5],

        serverSide: true,
        count, // Use total number of items
        // count: -1, // Unknown number of items
        page,
        onTableChange: (action, tableState) => {
            console.log(action, tableState)
            if (action === 'changePage') {
                console.log('Go to page', tableState.page)
                changePage(tableState)
            } else if (action == 'sort') {
                changePage(tableState)
            } else if (action == 'search') {
                changePage(tableState)
            }
        },
    }
    return (
        <>
            <div className="container">
                <MUIDataTable
                    title={
                        <Stack spacing={2} direction="row">
                            <Typography variant="h6">
                                Business Users
                                {isLoading && (
                                    <CircularProgress
                                        size={24}
                                        style={{
                                            marginLeft: 15,
                                            position: 'relative',
                                            top: 4,
                                        }}
                                    />
                                )}
                            </Typography>
                            {/* <Button
                                variant="contained"
                                onClick={() =>
                                    navigate('/admin/fleet-types/add')
                                }
                            >
                                Add Fleet Type
                            </Button> */}
                        </Stack>
                    }
                    data={data}
                    columns={columns}
                    options={options}
                />
            </div>
            <div>
                <Dialog
                    open={openDialogue}
                    onClose={handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                    <DialogTitle id="alert-dialog-title">
                        Confirmation
                    </DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            To delete this, click confirm. Or click on cancel
                            button to cancel
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={handleClose} color="primary">
                            Cancel
                        </Button>
                        <Button
                            onClick={() => {
                                handleClose()
                                CustomerService.deleteRecord(deleteId)
                                    .then((res) => {
                                        getData()
                                        console.log(
                                            'Successfullly deleted',
                                            res
                                        )
                                    })
                                    .catch((err) => {
                                        console.log('ERROR', err)
                                    })
                            }}
                            color="primary"
                        >
                            Confirm
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </>
    )
}
export default BusinessUsers
