import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Stack, Typography, Button, Tabs, Tab, Box } from "@mui/material";
import GeneralSettings from "./GeneralSettings";
import CompanyDetails from "./CompanyDetails";
import PaymentDetails from "./PaymentDetails";
import NotificationSettings from "./NotificationSettings";
import BookifyLogo from "../../assets/bookify-logo.png";
import { ReactComponent as CrownIcon } from "../../assets/crown.svg";
import { ReactComponent as GSIcon } from "../../assets/GSIcon.svg";
import { ReactComponent as CDIcon } from "../../assets/CDIcon.svg";
import { ReactComponent as PSIcon } from "../../assets/PSIcon.svg";
import { ReactComponent as NSIcon } from "../../assets/NSIcon.svg";
import { ReactComponent as ISIcon } from "../../assets/ISIcon.svg";

class Settings extends Component {
    state = {
        settings: [],
        currentTab: "GeneralTab",
        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",
                        },
                    },
                },
                MuiTab: {
                    styleOverrides: {
                        root: {
                            justifyContent: "flex-start",
                            width: "100%",
                            fontWeight: 500,
                            textTransform: "capitalize",
                            fontSize: "17px",
                            minHeight: "55px",
                            "&.Mui-selected": {
                                backgroundColor: "#EBF8F8",
                                color: "#036666",
                                borderRadius: "4px"
                            }
                        }
                    }
                },
            },
        }),
    };

    componentDidMount() {

        fetch(`${wpbAdmin.root}bookify/v1/settings`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            }
        })
        .then(response => response.json())
        .then(settings => {
            this.setState({ settings });
        })
        .catch(error => {
            console.error("Error fetching data:", error);
        })

        const title = window.wp.hooks.applyFilters("bookify_settings_title", "Settings");
        this.setState({ title });
    }

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

    handleChange = (event, newValue) => {
        this.setState({ currentTab: newValue });
    };

    render() {

        const { settings, title, theme, currentTab } = this.state;

        const IntegrationSettings = window.IntegrationSettings;

        const TabPanel = ({ children, value, index }) => {
            return (
                <div
                    role="tabpanel"
                    hidden={value !== index}
                    style={{ width: "100%" }}
                >
                    {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
                </div>
            );
        };

        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>
                    { ! IntegrationSettings && 
                        <Box>
                            <Button variant="wpbkGetPro" startIcon={<CrownIcon />} onClick={this.handleProVerion}>
                                {__("Get Pro Version", "bookify")}
                            </Button>
                        </Box>
                    }
                </Stack>

                <Box component="section" sx={{display:"flex", flexDirection:"row", alignItems:"flex-start", gap:"25px"}}>
                    <Box Component="div" sx={{display:"flex", justifyContent:"center", ml:"2em", p:"15px", width:"20em", backgroundColor:"#FFFFFF", border:"1px solid #DDEEEE", borderRadius:"4px"}}>
                        <Tabs 
                            orientation="vertical" 
                            value={currentTab} 
                            onChange={this.handleChange}
                            defaultValue={"GeneralTab"} 
                            sx={{
                                width: "20em",
                                "& .MuiTabs-flexContainerVertical": {
                                    flexDirection: "column",
                                    alignItems: "flex-start",
                                    gap: "10px"
                                },
                                "& .MuiTabs-indicator": {
                                    display: "none"
                                }
                            }}
                        >
                            <Tab value={"GeneralTab"} icon={<GSIcon />} iconPosition="start" label={__("General Settings", "bookify")} />
                            <Tab value={"CompanyTab"} icon={<CDIcon />} iconPosition="start" label={__("Company Details", "bookify")} />
                            <Tab value={"PaymentTab"} icon={<PSIcon />} iconPosition="start" label={__("Payment Settings", "bookify")} />
                            <Tab value={"NotificationTab"} icon={<NSIcon />} iconPosition="start" label={__("Notification Settings", "bookify")} />
                            {IntegrationSettings && (
                                <Tab value={"IntegrationTab"} icon={<ISIcon />} iconPosition="start" label={__("Integration Settings", "bookify")} />
                            )}
                        </Tabs>
                    </Box>
                    <Box Component="div" sx={{display:"flex", justifyContent:"center", mr:"2em", p:"15px", width:"100%", backgroundColor:"#FFFFFF", border:"1px solid #DDEEEE", borderRadius:"4px"}}>
                        <TabPanel value={currentTab} index={"GeneralTab"}>
                            <GeneralSettings
                                savedGeneralSettings={settings.general}
                            />
                        </TabPanel>
                        <TabPanel value={currentTab} index={"CompanyTab"}>
                            <CompanyDetails
                                savedCompanyDetails={settings.company}
                            />
                        </TabPanel>
                        <TabPanel value={currentTab} index={"PaymentTab"}>
                            <PaymentDetails
                                savedPaymentDetails={settings.payment}
                            />
                        </TabPanel>
                        <TabPanel value={currentTab} index={"NotificationTab"}>
                            <NotificationSettings
                                savedNotificationSettings={settings.notification}
                            />
                        </TabPanel>
                        {IntegrationSettings && (
                            <TabPanel value={currentTab} index={"IntegrationTab"}>
                                <IntegrationSettings
                                    savedIntegrationSettings={settings.integration}
                                />
                            </TabPanel>
                        )}
                    </Box>
                </Box>
            </ThemeProvider>
        );
    }
}

export default Settings;