import React, { useState, useEffect } from 'react'
import {
    CircularProgress,
    Typography,
    FormControlLabel,
    Switch,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Button,
    Stack,
    createTheme,
} from '@mui/material'
import MUIDataTable from 'mui-datatables'
import { chunk } from 'lodash'
import useAuth from 'app/hooks/useAuth'
import { useNavigate } 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 CompanyService from 'app/services/istar/CompanyService'
import LinkIcon from '@mui/icons-material/Link'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { toast } from 'react-toastify'
import { SimpleCard } from 'app/components'
import { ThemeProvider } from '@mui/system'

const themeee = createTheme({
    components: {
        MUIDataTableBodyCell: {
            styleOverrides: {
                root: {
                    // backgroundColor: '#FFF',
                    // padding: '0.2rem',
                    // maxWidth: '8rem',
                },
            },
        },
        MUIDataTableHeadCell: {
            styleOverrides: {
                root: {
                    // borderColor: '#4061c9',
                    // borderTop: '55px',
                    // backgroundColor: '#2A324C',
                    // color: 'white',
                    // padding: '0px',
                },
            },
        },
    },
})

function Companies(props) {
    const navigate = useNavigate()
    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 [copied, setCopied] = React.useState(false)

    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)
        CompanyService.query({ 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) => {
            CompanyService.query({ 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 onClick = React.useCallback((e, comp) => {
        console.log(`Clicked on "${comp}"!`)
        // const companyFound = data.find(da => da._id == innerText)
        // console.log("companyFound",companyFound)
        toast.success(`Iframe url copied for ${comp}`)
    }, [])

    const onCopy = React.useCallback(() => {
        setCopied(true)
    }, [])

    const columns = [
        {
            name: 'name',
            label: 'Name',
            options: {
                // filter: true,
                sort: true,
            },
        },
        {
            name: 'colorOne',
            label: 'Color One',
            options: {
                // filter: true,
                sort: true,
            },
        },
        {
            name: 'colorTwo',
            label: 'ColorTwo',
            options: {
                // filter: true,
                sort: true,
            },
        },
        {
            name: 'logo',
            label: 'Logo',
            options: {
                sort: true,
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <a target="_blank" href={data[tableMeta.rowIndex].logo}>
                            <VisibilityIcon />
                        </a>
                    )
                },
            },
        },
        {
            name: '_id',
            label: 'IFrame',
            options: {
                sort: true,
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        // <a target="_blank" href={`https://istarhearing.com/iframe/${data[tableMeta.rowIndex]._id}`}>

                        // </a>
                        <>
                            <CopyToClipboard
                                onCopy={onCopy}
                                options={{ message: 'Whoa!' }}
                                text={`https://istarhearing.com/iframe/${
                                    data[tableMeta.rowIndex]._id
                                }`}
                            >
                                <Button
                                    onClick={(e) =>
                                        onClick(
                                            e,
                                            data[tableMeta.rowIndex].name
                                        )
                                    }
                                    variant="contained"
                                >
                                    Copy to clipboard
                                </Button>
                            </CopyToClipboard>
                        </>
                    )
                },
            },
        },
        {
            name: 'Actions',
            options: {
                sort: true,
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <>
                            <Link
                                to={`/admin/company/edit/${
                                    data[tableMeta.rowIndex]._id
                                }`}
                                // to="#"
                                title="Edit Company"
                            >
                                <EditIcon />
                            </Link>

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

    const handleMultipleDelete = (action) => {
        setIsLoading(true)
        // data[tableMeta.rowIndex]._id
        console.log('action: ', action)

        let newArr = action?.data?.map((d) => {
            return data[d?.index]?._id
        })
        console.log('NEW ARR: ', newArr)
        CompanyService.multipleDelete({
            deleteItems: newArr,
        })
            .then((res) => {
                console.log(res)
            })
            .catch((err) => console.log(err))
            .finally(() => {
                setIsLoading(false)
            })
    }

    const options = {
        responsive: 'standard',
        fixedHeader: true,
        fixedSelectColumn: false,
        // filters: false,
        filter: false,
        // filterType: 'dropdown',

        jumpToPage: true,
        rowsPerPage: 5,
        rowsPerPageOptions: [5],
        // selectableRows: 'none',
        download: false,
        print: false,
        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)
            }
        },
        onRowsDelete: (action, tableState) => {
            // console.log(action, tableState)
            handleMultipleDelete(action)
        },
    }
    return (
        <>
            <SimpleCard>
                <div className="container">
                    <ThemeProvider theme={themeee}>
                        <MUIDataTable
                            title={
                                <Stack spacing={2} direction="row">
                                    <Typography variant="h6">
                                        Companies
                                        {isLoading && (
                                            <CircularProgress
                                                size={24}
                                                style={{
                                                    marginLeft: 15,
                                                    position: 'relative',
                                                    top: 4,
                                                }}
                                            />
                                        )}
                                    </Typography>
                                    <Button
                                        variant="contained"
                                        onClick={() =>
                                            navigate('/admin/company/add')
                                        }
                                    >
                                        Add Company
                                    </Button>
                                </Stack>
                            }
                            data={data}
                            columns={columns}
                            options={options}
                        />
                    </ThemeProvider>
                </div>
            </SimpleCard>
            <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()
                                CompanyService.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 Companies
