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 VisibilityIcon from '@mui/icons-material/Visibility'
import { Link, Navigate } from 'react-router-dom'
import EditIcon from '@mui/icons-material/Edit'
import DeleteIcon from '@mui/icons-material/Delete'
import { useNavigate } from 'react-router-dom'
import { MatxLoading } from 'app/components'
import FAQSService from 'app/services/allThingsLocals/FAQSService'

function FAQS(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 handleClose = () => {
        setDeleteId('')
        setOpenDialogue(false)
    }

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

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

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

    const getData = () => {
        setIsLoading(true)
        FAQSService.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) => {
            FAQSService.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 columns = [
        {
            name: 'question',
            label: 'Question',
            options: {
                sort: true,
            },
        },
        {
            name: 'answer',
            label: 'Answer',
            options: {
                sort: true,
            },
        },

        {
            name: 'Actions',
            options: {
                sort: true,
                customBodyRender: (value, tableMeta, updateValue) => {
                    console.log('VALUE: ', value, tableMeta)
                    return (
                        <>
                            <Link
                                // to="#"
                                to={`/admin/faqs/edit/${
                                    data[tableMeta.rowIndex]._id
                                }`}
                                title="Edit FAQ"
                            >
                                <EditIcon />
                            </Link>

                            <Link
                                to="#"
                                title="Delete FAQ"
                                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)
            }
        },
    }

    if (isLoading) {
        return <MatxLoading />
    }

    return (
        <>
            <div className="container">
                <MUIDataTable
                    title={
                        <>
                            <Stack spacing={2} direction="row">
                                <Typography variant="h6">
                                    FAQS
                                    {isLoading && (
                                        <CircularProgress
                                            size={24}
                                            style={{
                                                marginLeft: 15,
                                                position: 'relative',
                                                top: 4,
                                            }}
                                        />
                                    )}
                                </Typography>
                                <Button
                                    variant="contained"
                                    onClick={() => navigate('/admin/faqs/add')}
                                >
                                    Add FAQ
                                </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()
                                FAQSService.deleteFAQ(deleteId)
                                    .then((res) => {
                                        getData()
                                        console.log(
                                            'Successfullly deleted',
                                            res
                                        )
                                    })
                                    .catch((err) => {
                                        console.log('ERROR', err)
                                    })
                                // refreshTable();
                            }}
                            color="primary"
                        >
                            Confirm
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </>
    )
}
export default FAQS
