import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import {
    Paper, Typography, TableContainer, Table, TableHead,
    TableRow, TableCell, TableSortLabel, TableBody, TablePagination,
    Avatar, FormControl, Select, MenuItem, Box, IconButton, Skeleton
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import { 
    handleRequestSort, handleChangePage, handleChangeRowsPerPage 
} from "../../functions";
import { SnackbarNotice, ConfirmationDialog } from "../../functions";
import currencies from "../../currencies.json";
import dayjs from "dayjs";

class PaymentTable extends Component {

    state = {
        StatusOptions: [
            "Pending",
            "Paid",
            "Partially Paid"
        ],
        snackbarOpen: false,
        snackbarMessage: "",
        snackbarType: "success",
        confirmationDialogOpen: false,
        confirmationLoading: false,
        paymentToDelete: null,
    };

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

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

    handlePaymentDelete = (payment) => {
        this.setState({ confirmationDialogOpen: true, paymentToDelete: payment });
    };

    ConfirmationPaymentDelete = () => {
        const { paymentToDelete } = this.state;

        const { fetchPaymentData } = this.props
        this.setState({ confirmationLoading: true });

        const dataToSend = {};
        dataToSend.payment_id = paymentToDelete.payment_id;
        dataToSend.total_amount = paymentToDelete.total;
        dataToSend.appointment_id = paymentToDelete.appointment_id;

        fetch(`${wpbAdmin.root}bookify/v1/delete-payment`, {
            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,
                    paymentToDelete: null,
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "success",
                });
                fetchPaymentData();
            } else {
                this.setState({ 
                    confirmationLoading: false,
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "error",
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            this.setState({ confirmationLoading: false });
        })
    }

    handlePaymentStatusChange = ( event, paymentID ) => {
        const { value } = event.target;
        const { fetchPaymentData } = this.props

        const dataToSend = {};
        dataToSend.payment_id = paymentID;
        dataToSend.payment_status = value;

        fetch(`${wpbAdmin.root}bookify/v1/update-payment`, {
            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",
                });
                fetchPaymentData();
            } else {
                this.setState({ 
                    snackbarOpen: true, 
                    snackbarMessage: response.message, 
                    snackbarType:  "error"
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
        })
    }

    render() {

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

        const matchedCurrency = Object.values(currencies).find(eachCurrency => eachCurrency.code === currency);

        return (
            <>
                <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" ? "4em" : "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) => {
                                        return (
                                            <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 === "appointment_date" ? (
                                                            <Typography 
                                                                sx={{
                                                                    display: "flex",
                                                                    flexDirection: "column",
                                                                    color:"#036666",
                                                                    fontSize:"0.875rem"
                                                                }}
                                                            >
                                                                {dayjs(row[headCell.id]).format(dateFormat)}
                                                            </Typography>
                                                        ) : headCell.id === "appointment_customer" ? (
                                                            <Box sx={{display:"flex"}}>
                                                                <Avatar 
                                                                    src={row.appointment_customer_img ? row.appointment_customer_img : undefined}
                                                                    sx={{
                                                                        fontSize:"1rem",
                                                                        width:"35px",
                                                                        height:"35px",
                                                                        mr:"10px"
                                                                    }}
                                                                />
                                                                <Typography 
                                                                    sx={{
                                                                        display: "flex",
                                                                        flexDirection: "column",
                                                                        color:"#036666",
                                                                        fontSize:"0.875rem"
                                                                    }}
                                                                >
                                                                    {row["appointment_customer_name"]}
                                                                    <Typography 
                                                                        variant="caption"
                                                                        sx={{
                                                                            color:"#18120F",
                                                                            fontSize:"0.875rem"
                                                                        }}
                                                                    >
                                                                        {row["appointment_customer_email"]}
                                                                    </Typography>
                                                                </Typography>
                                                                </Box>
                                                        ) : headCell.id === "appointment_staff" ? (
                                                            <Box sx={{display:"flex"}}>
                                                                <Avatar 
                                                                    src={row.appointment_staff_img ? row.appointment_staff_img : undefined}
                                                                    sx={{
                                                                        fontSize:"1rem",
                                                                        width:"35px",
                                                                        height:"35px",
                                                                        mr:"10px"
                                                                    }}
                                                                />
                                                                <Typography 
                                                                    sx={{
                                                                        display: "flex",
                                                                        flexDirection: "column",
                                                                        color:"#036666",
                                                                        fontSize:"0.875rem"
                                                                    }}
                                                                >
                                                                    {row["appointment_staff_name"]}
                                                                    <Typography 
                                                                        variant="caption"
                                                                        sx={{
                                                                            color:"#18120F",
                                                                            fontSize:"0.875rem"
                                                                        }}
                                                                    >
                                                                        {row["appointment_staff_email"]}
                                                                    </Typography>
                                                                </Typography>
                                                            </Box>
                                                        ) : headCell.id === "appointment_service" ? (
                                                            <Typography 
                                                                sx={{
                                                                    display: "flex",
                                                                    alignItems: "center",
                                                                    flexDirection: "column",
                                                                    fontSize:"0.875rem"
                                                                }}
                                                            >
                                                                {row["service_name"]}
                                                            </Typography>
                                                        ) : headCell.id === "total" ? ( 
                                                            <Typography 
                                                                sx={{
                                                                    display: "flex",
                                                                    flexDirection: "column",
                                                                    fontSize:"0.875rem"
                                                                }}
                                                            >
                                                                {`${matchedCurrency.symbol_native} ${row[headCell.id]}`}
                                                            </Typography>
                                                        ) : headCell.id === "paid" ? ( 
                                                            <Typography 
                                                                sx={{
                                                                    display: "flex",
                                                                    flexDirection: "column",
                                                                    fontSize:"0.875rem"
                                                                }}
                                                            >
                                                                {`${matchedCurrency.symbol_native} ${row[headCell.id]}`}
                                                            </Typography>
                                                        ) : headCell.id === "due" ? (
                                                            <Typography 
                                                                sx={{
                                                                    display: "flex",
                                                                    flexDirection: "column",
                                                                    fontSize:"0.875rem"
                                                                }}
                                                            >
                                                                {`${matchedCurrency.symbol_native} ${row[headCell.id]}`}
                                                            </Typography>
                                                        ) : headCell.id === "status" ? (
                                                            <FormControl size="small" sx={{width:"7em"}}>
                                                                <Select
                                                                    value={row[headCell.id]}
                                                                    onChange={(event) => {
                                                                        event.stopPropagation();
                                                                        this.handlePaymentStatusChange(event, row["payment_id"])
                                                                    }}
                                                                >
                                                                    {StatusOptions.map((value) => (
                                                                        <MenuItem key={value} value={value}>
                                                                            {value}
                                                                        </MenuItem>
                                                                    ))}
                                                                </Select>
                                                            </FormControl>
                                                        ) : headCell.id === "action" ? (
                                                            <Box sx={{textWrap:"nowrap", width:"100%"}}>
                                                                <IconButton 
                                                                    color="error"
                                                                    onClick={(event) => { 
                                                                        this.handlePaymentDelete(row) 
                                                                    }}
                                                                    sx={{padding:"0px 8px"}}
                                                                >
                                                                    <DeleteIcon />
                                                                </IconButton>
                                                                
                                                            </Box>
                                                        ) : (
                                                            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.fetchPaymentData, newPage)}
                        onRowsPerPageChange={(event) => handleChangeRowsPerPage(state, setState, this.props.fetchPaymentData, event)}
                    />
                </Paper>
                <SnackbarNotice
                    state={this.state}
                    setState={this.setState.bind(this)}
                    open={snackbarOpen}
                    message={snackbarMessage}
                    type={snackbarType}
                />
                <ConfirmationDialog
                    open={confirmationDialogOpen}
                    onClose={() => this.setState({ confirmationDialogOpen: false, paymentToDelete: null })}
                    onConfirm={this.ConfirmationPaymentDelete}
                    loading={confirmationLoading}
                />
            </>
        )
    }
}

export default PaymentTable;