import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { 
    Grid, Typography, Stack, Box, Button
} from "@mui/material";
import TotalRevenue from "./TotalRevenue";
import ServiceWiseEarning from "./ServiceWiseEarning";
import StaffWiseEarning from "./StaffWiseEarning";
import StaffWiseTotalAppointments from "./StaffWiseTotalAppointments";
import CustomerStatus from "./CustomerStatus";
import CustomerSection from "./CustomerSection";
import ApprovedAppointment from "./ApprovedAppointment";
import currencies from "../../currencies.json";
import BookifyLogo from "../../assets/bookify-logo.png";
import { ReactComponent as CrownIcon } from "../../assets/crown.svg";

class Dashboard extends Component {

    state = {
        staffWiseEarning: [],
        staffWiseAppointments: [],
        customerStatuses: [],
        revenueSection: [],
        customerSection: [],
        approvedAppointment: [],
        services: [],
        currency: "USD",
        open: false,
        dataHandler: {
            "today": "Today",
            "currentweek": "Current Week",
            "currentmonth": "Current Month",
            "currentyear": "Current Year",
        },
        approveAppointmentDefault: "today",
        theme: createTheme({
            typography: {
                h2: {
                    fontSize: "2em",
                    textTransform: "capitalize",
                    color: "#587373",
                    marginLeft: "10px"
                },
            },
            components: {
                MuiButton: {
                    variants: [
                        {
                            props: { variant: "wpbkGetPro" },
                            style: {
                                textTransform: "capitalize",
                                backgroundColor: "#FFDD9A",
                                boxShadow: "none",
                                color: "#735928",
                                padding: "10px 20px",
                                fontWeight: 600,
                                "&:hover": {
                                    backgroundColor: "#f5cd7d",
                                    boxShadow: "none",
                                },
                            },
                        },
                    ],
                },
                MuiStack: {
                    styleOverrides: {
                        root: {
                            backgroundColor: "#FFFFFF",
                            border: "1px solid #DDEEEE",
                            borderRadius: "4px",
                        },
                    },
                },
                MuiMenuItem: {
                    styleOverrides: {
                        root: {
                            marginLeft: "3px",
                            marginRight: "3px",
                            paddingLeft: "10px",
                            paddingRight: "10px",
                            borderRadius: "8px"
                        },
                    },
                }
            },
        }),
    };

    componentDidMount() {
        const title = window.wp.hooks.applyFilters("dokan_dashboard_title", "Dashboard");
        this.setState({ title });

        this.fetchDashboardData();
    }

    fetchDashboardData = () => {
        fetch(`${wpbAdmin.root}bookify/v1/dashboard`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            }
        })
        .then(response => response.json())
        .then(data => {
            this.setState({ 
                services: data.services,
                currency: data.currency,
                staffWiseEarning: data.staff_earning_chart,
                staffWiseAppointments: data.staff_total_appointment,
                customerStatuses: data.customer_status,
                revenueSection: data.revenue_section,
                customerSection: data.customer_section,
                approvedAppointment: data.approved_appointment
            });
        })
        .catch(error => {
            console.error("Error fetching data:", error);
        })
    }

    handleProVerion = () => {
        window.open("https://wpbookify.com/pricing/", "_blank");
    }

    render() {

        const { theme, title, dataHandler, approvedAppointment, services, staffWiseEarning, staffWiseAppointments, customerStatuses, revenueSection, customerSection, currency } = this.state;
        const matchedCurrency = Object.values(currencies).find(eachCurrency => eachCurrency.code === currency);

        const ProLocation = window.ProLocation;

        return (

            <ThemeProvider theme={theme}>
                <Stack spacing={2} mb={"2em"} p={"1.5em 2em"} direction={"row"} alignItems={"center"} justifyContent={"space-between"}>
                    <Box sx={{display:"flex", direction:"row", alignItems:"flex-end"}}>
                        <img src={BookifyLogo} alt="Bookify Logo" style={{height: 40}} />
                        <Typography variant={"h2"}>{title}</Typography>
                    </Box>
                    { ! ProLocation && 
                        <Box>
                            <Button variant="wpbkGetPro" startIcon={<CrownIcon />} onClick={this.handleProVerion}>
                                {__("Get Pro Version", "bookify")}
                            </Button>
                        </Box>
                    }
                </Stack>
                <Box component={"section"}>
                    <Box component={"div"} sx={{m:"2em"}}>
                        <Grid container spacing={5}>
                            <Grid item md={4}>
                                <TotalRevenue
                                    dataHandler={dataHandler}
                                    revenueSection={revenueSection}
                                    matchedCurrency={matchedCurrency}
                                />
                            </Grid>
                            <Grid item md={4}>
                                <CustomerSection
                                    dataHandler={dataHandler}
                                    customerSection={customerSection}
                                />
                            </Grid>
                            <Grid item md={4}>
                                <ApprovedAppointment
                                    dataHandler={dataHandler}
                                    approvedAppointment={approvedAppointment}
                                />
                            </Grid>
                        </Grid>
                    </Box>
                    <Box component={"div"} sx={{m:"2em"}}>
                        <Grid container spacing={5} >
                            <Grid item md={8}>
                                <StaffWiseTotalAppointments
                                    staffWiseAppointmentsChart={staffWiseAppointments}
                                />
                            </Grid>
                            <Grid item md={4}>
                                <ServiceWiseEarning
                                    services={services}
                                />
                            </Grid>
                        </Grid>
                    </Box>
                    <Box component={"div"} sx={{m:"2em"}}>
                        <Grid container spacing={5} >
                            <Grid item md={8}>
                                <StaffWiseEarning
                                    staffWiseEarningChart={staffWiseEarning}
                                />
                            </Grid>
                            <Grid item md={4}>
                                <CustomerStatus
                                    customerStatuses={customerStatuses}
                                />
                            </Grid>
                        </Grid>
                    </Box>
                </Box>
            </ThemeProvider>
        );
    }
}

export default Dashboard;