import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import {
    Paper, Typography, TableContainer, Table, TableHead,
    TableRow, TableCell, TableSortLabel, TableBody, Box, Switch,
    IconButton, TablePagination, FormControl, FormControlLabel, Skeleton
} from "@mui/material";
import ModeIcon from "@mui/icons-material/Mode";
import DeleteIcon from "@mui/icons-material/Delete";
import { 
    handleRequestSort, handleChangePage, handleChangeRowsPerPage, openDialog 
} from "../../functions";
import { SnackbarNotice, ConfirmationDialog } from "../../functions";

class NotificationTable extends Component {

    state = {
        headCells: [
            { id: "id", label: "ID", priority: 0 },
            { id: "notification_name", label: "Notification Name", priority: 5 },
            { id: "notification_event", label: "Event", priority: 10 },
            { id: "state", label: "Status", priority: 15 },
            { id: "email_sends_to", label: "Email Sends To", priority: 20 },
            { id: "action", label: "Action", priority: 30 },
        ],
        snackbarOpen: false,
        snackbarMessage: "",
        snackbarType: "success",
        confirmationDialogOpen: false,
        confirmationLoading: false,
        NotificationIdToDelete: null,
        theme: createTheme({
            components: {
                MuiSwitch: {
                    styleOverrides: {
                        root: {
                            width: "40px",
                            height: "23px",
                            padding: "0px",
                            borderRadius: "13px"
                        },
                        switchBase: {
                            padding: "0px",
                            margin: "3px",
                            transitionDuration: "300ms",
                            "&.Mui-checked": {
                                transform: "translateX(17px)",
                                color: "#FFFFFF",
                                "& .MuiSwitch-thumb": {
                                    color: "#EBF8F8",
                                },
                                "& + .MuiSwitch-track": {
                                    backgroundColor: "#036666",
                                    opacity: 1,
                                    border: "none",
                                },
                                "&.Mui-disabled + .MuiSwitch-track": {
                                    opacity: 0.5,
                                },
                            },
                            "&.Mui-focusVisible .MuiSwitch-thumb": {
                                color: "#33cf4d",
                                border: "6px solid #FFFFFF",
                            },
                            "&.Mui-disabled .MuiSwitch-thumb": {
                                opacity: 0.5,
                            },
                            "&.Mui-disabled + .MuiSwitch-track": {
                                opacity: 0.7,
                            },
                            "& .MuiSwitch-input": {
                                border: "none",
                                background: "none",
                                display: "none"
                            }
                        },
                        thumb: {
                            width: "17px",
                            height: "17px",
                            color: "#036666"
                        },
                        track: {
                            borderRadius: "13px",
                            backgroundColor: "#EBF8F8",
                            opacity: 1,
                            transition: "background-color 500ms",
                            border: "1px solid #BFD4D4",
                            height: "auto"
                        },
                    },
                },
            }
        })
    }

    componentDidMount() {
        let { headCells } = this.state;

        headCells = window.wp.hooks.applyFilters("bookify_notification_table_add_columns", headCells);
        this.setState({ headCells });
    }

    handleNotificationDelete = (notificationID) => {
        this.setState({ confirmationDialogOpen: true, NotificationIdToDelete: notificationID });
    };
    
    ConfirmationNotificationDelete = () => {
        const { NotificationIdToDelete } = this.state
        this.setState({ confirmationLoading: true });

        const dataToSend = {};
        dataToSend.notification_id = NotificationIdToDelete;

        fetch(`${wpbAdmin.root}bookify/v1/delete-notification`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then((response) => {
            if ( response.success ) {
                this.setState({ 
                    confirmationDialogOpen: false,
                    confirmationLoading: false,
                    NotificationIdToDelete: null,
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "success",
                });
                this.props.fetchNotificationData();
            } else {
                this.setState({ 
                    confirmationLoading: false,
                    snackbarOpen: true, 
                    snackbarMessage: response.message, 
                    snackbarType:  "error"
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            this.setState({ confirmationLoading: false });
        })
    };

    handleNotificationState = (event, notificationId) => {
        const { checked } = event.target;
        const dataToSend = {};
        dataToSend.notification_id = notificationId;
        dataToSend.notificationState = checked;

        fetch(`${wpbAdmin.root}bookify/v1/update-notification-state`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then((response) => {
            if (response.success) {
                this.setState({
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "success"
                });
                this.props.fetchNotificationData();
            } else {
                this.setState({
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "error"
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
        })
    }

    render() {

        const { theme, headCells, snackbarOpen, snackbarMessage, snackbarType, confirmationDialogOpen, confirmationLoading } = this.state;
        const { state, setState, TableData, orderBy, order, totalCount, pageSize, page, dataLoading } = this.props

        const getTrueKeys = (data) => {
            return Object.keys(data)
                .filter(key => data[key] === "true")
                .map(key => key.replace(/_/g, " ").replace(/\b\w/g, char => char.toUpperCase()))
                .join(" | ");
        };

        return (
            <>  
                <ThemeProvider theme={theme}>
                    <Paper sx={{boxShadow:"none", border:"1px solid #DDEEEE", borderRadius:"4px"}}>
                        <TableContainer>
                            <Table>
                                <TableHead>
                                    <TableRow>
                                        {headCells.sort((a, b) => a.priority - b.priority).map((headCell) => (
                                            <TableCell
                                                key={headCell.id}
                                                align="left"
                                                sortDirection={orderBy === headCell.id ? order : false}
                                                sx={{borderBottom: "1px solid #CDE0E0", width:headCell.id === "action" ? "6em" : "unset"}}
                                            >
                                                {headCell.id === "action" ? (
                                                    <Typography variant="span">{headCell.label}</Typography>
                                                ) : (
                                                    <TableSortLabel
                                                        active={orderBy === headCell.id}
                                                        direction={orderBy === headCell.id ? order : "desc"}
                                                        onClick={(event) => handleRequestSort(state, setState, headCell.id)}
                                                    >
                                                        {headCell.label}
                                                    </TableSortLabel>
                                                )}
                                            </TableCell>
                                        ))}
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {dataLoading ? (
                                        Array.from({ length: 5 }).map((_, index) => (
                                            <TableRow key={index}>
                                                {headCells.map((headCell) => (
                                                    <TableCell key={headCell.id} align="left" sx={{borderBottom: "1px solid #CDE0E0"}}>
                                                        <Skeleton animation="wave" variant="text" width="80%" />
                                                    </TableCell>
                                                ))}
                                            </TableRow>
                                        ))
                                    ) : TableData.length === 0 ? (
                                        <TableRow>
                                            <TableCell colSpan={headCells.length} align="center" sx={{borderBottom: "1px solid #CDE0E0", height:"36px"}}>
                                                {__("No records to display", "bookify")}
                                            </TableCell>
                                        </TableRow>
                                    ) : (
                                        TableData.map((row) => (
                                            <TableRow hover key={row.id}>
                                                {headCells.sort((a, b) => a.priority - b.priority).map((headCell) => (
                                                    <TableCell key={headCell.id} align="left" sx={{borderBottom: "1px solid #CDE0E0"}}>
                                                        {headCell.id === "state" ? (
                                                            <FormControl>
                                                                <FormControlLabel 
                                                                    name="notificationState" 
                                                                    checked={row.notification_toggle} 
                                                                    onChange={(event) => {
                                                                        this.handleNotificationState(event, row.id);
                                                                    }}
                                                                    control={<Switch color="primary" />}
                                                                    sx={{m:"0px"}}
                                                                />
                                                            </FormControl>
                                                        ) : headCell.id === "action" ? (
                                                            <Box sx={{textWrap:"nowrap", width:"100%"}}>
                                                                <IconButton 
                                                                    color="success"
                                                                    onClick={(event) => {
                                                                        openDialog(state, setState, "AddNotificationDialog", row.id);
                                                                    }}
                                                                    sx={{padding: "6px"}}
                                                                >
                                                                    <ModeIcon />
                                                                </IconButton>
                                                                    <IconButton 
                                                                        color="error"
                                                                        onClick={(event) => {
                                                                            this.handleNotificationDelete(row.id);
                                                                        }}
                                                                        sx={{padding:"6px"}}
                                                                    >
                                                                    <DeleteIcon />
                                                                </IconButton>
                                                            </Box>
                                                        ) : headCell.id === "email_sends_to" ? (
                                                            <>
                                                                {getTrueKeys(row[headCell.id])}
                                                            </>
                                                        ) : (
                                                            row[headCell.id]
                                                        )}
                                                    </TableCell>
                                                ))}
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </TableContainer>
                        <TablePagination
                            component="div"
                            count={totalCount}
                            rowsPerPage={pageSize}
                            page={page}
                            onPageChange={(event, newPage) => handleChangePage(state, setState, this.props.fetchNotificationData, newPage)}
                            onRowsPerPageChange={(event) => handleChangeRowsPerPage(state, setState, this.props.fetchNotificationData, event)}
                        />
                    </Paper>
                </ThemeProvider>
                <SnackbarNotice
                    state={this.state}
                    setState={this.setState.bind(this)}
                    open={snackbarOpen}
                    message={snackbarMessage}
                    type={snackbarType}
                />
                <ConfirmationDialog
                    open={confirmationDialogOpen}
                    onClose={() => this.setState({ confirmationDialogOpen: false, NotificationIdToDelete: null })}
                    onConfirm={this.ConfirmationNotificationDelete}
                    loading={confirmationLoading}
                />
            </>
        )
    }
}

export default NotificationTable;