import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import {
    Stack, Typography, Box, FormControl,
    TextField, InputAdornment, Button
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";
import { GetProModal } from "../../functions";
import { ReactComponent as UpgradeIcon } from "../../assets/upgrade.svg";
import BookifyLogo from "../../assets/bookify-logo.png";
import { ReactComponent as CrownIcon } from "../../assets/crown.svg";
import { ReactComponent as CsvIcon } from "../../assets/csv.svg";

class Location extends Component {

    state = {
        proModalOpen: false,
        theme: createTheme({
            typography: {
                h2: {
                    fontSize: "2em",
                    textTransform: "capitalize",
                    color: "#587373",
                    marginLeft: "10px"
                },
                h6: {
                    marginBottom: 1, 
                    color: "#042626", 
                    fontSize: "20px", 
                    fontWeight:"600"
                },
                body1: {
                    marginBottom: 2, 
                    color: "#587373", 
                    fontSize: "16px", 
                    fontWeight: "400"
                }
            },
            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",
                                },
                            },
                        },
                        {
                            props: { variant: "wpbkThemeBtn" },
                            style: {
                                borderColor: "none",
                                backgroundColor: "#036666",
                                color: "#FFFFFF",
                                textTransform: "capitalize",
                                width: "13em",
                                height: "100%",
                                "&:hover": {
                                    backgroundColor: "#025151",
                                    color: "#FFFFFF"
                                },
                                "&.Mui-disabled": {
                                    color: "#FFFFFF",
                                    opacity: 0.7,
                                }
                            },
                        },
                        {
                            props: { variant: "wpbkThemeCSVBtn" },
                            style: {
                                border: "1px solid #BFD4D4",
                                color: "#042626",
                                textTransform: "capitalize",
                                height: "100%",
                                width: "12em",
                                "&.Mui-disabled": {
                                    color: "#042626",
                                    opacity: 0.7,
                                }
                            },
                        },
                    ],
                },
                MuiStack: {
                    styleOverrides: {
                        root: {
                            backgroundColor: "#FFFFFF",
                            border: "1px solid #DDEEEE",
                            borderRadius: "4px",
                        },
                    },
                },
            },
        }),
    };

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

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

    handleProPopup = () => {
        this.setState({
            proModalOpen: true
        });
        return;
    }

    render() {

        const { theme, title, proModalOpen } = this.state;

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

                    <Box component="section">
                        <Box component="div" sx={{display:"flex", justifyContent:"space-between", m:"2em", p:"15px", backgroundColor:"#FFFFFF", border:"1px solid #DDEEEE", borderRadius:"4px"}}>
                            <Box Component="div">
                                <FormControl sx={{width:"40em"}}>
                                    <TextField
                                        variant="outlined"
                                        placeholder="Search locations"
                                        onClick={this.handleProPopup}
                                        onChange={this.handleProPopup}
                                        value=""
                                        sx={{
                                            height: "45px",
                                            border: "1px solid #BFD4D4",
                                            borderRadius: "4px",
                                            color:"#789595",
                                            "& fieldset": {
                                                border: "none",
                                            }
                                        }}
                                        InputProps={{
                                            sx: {
                                                paddingRight: "5px",
                                                "& input": {
                                                    padding: "11px",
                                                    "::placeholder": {
                                                        color: "#789595",
                                                        opacity: 1
                                                    },
                                                },
                                            },
                                            endAdornment: (
                                                <InputAdornment position="start" sx={{color: "#042626"}}>
                                                    <SearchIcon />
                                                </InputAdornment>
                                            ),
                                        }}
                                    />
                                </FormControl>
                            </Box>
                            <Box Component="div" sx={{display:"flex", justifyContent:"flex-start", gap:"20px"}}>
                                <Box Component="div">
                                    <Button onClick={this.handleProPopup} variant="wpbkThemeCSVBtn" startIcon={<CsvIcon />} >
                                        {__("Export to CSV", "bookify")}
                                    </Button>
                                </Box>
                                <Box Component="div">
                                    <Button onClick={this.handleProPopup} variant="wpbkThemeBtn" startIcon={<AddIcon />}>
                                        {__("Add Location", "bookify")}
                                    </Button>
                                </Box>
                            </Box>
                        </Box>
                        <Box component="div" sx={{display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"center", height:"33rem", m:"2em", p:"15px", backgroundColor:"#FFFFFF", border:"1px solid #DDEEEE", borderRadius:"4px", gap:"15px"}}>
                            <UpgradeIcon width={80} height={80}/>
                            <Typography variant="h6">{__("Interested in unlocking this feature?", "bookify")}</Typography>
                            <Typography variant="body1">{__("Available in Pro Version", "bookify")}</Typography>
                            <Button variant="wpbkGetPro" onClick={this.handleProVerion}>
                                {__("Upgrade to Pro", "bookify")}
                            </Button>
                        </Box>
                    </Box>
                </ThemeProvider>
                <GetProModal 
                    open={proModalOpen}
                    onClose={() => this.setState({ proModalOpen: false })}
                />
            </>
        )
    }
}

export default Location;