import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Box, Typography, Grid, Card, CardActionArea, CardContent } from "@mui/material";
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import defaultThemeImg from "../../assets/default-theme.png";
import lightThemeImg from "../../assets/light-theme.png";

class ThemeWizard extends Component {
    state = {
        theme: createTheme({
            typography: {
                h2: {
                    fontSize: "1.5rem",
                    fontWeight: "550",
                    lineHeight: "2rem",
                    textTransform: "capitalize",
                    color: "#111827",
                },
                body1: {
                    fontFamily: "Figtree, sans-serif",
                    fontSize: "0.875rem",
                    lineHeight: "1.25rem",
                    color: "#4b5563",
                }
            },
            components: {
                MuiTextField: {
                    styleOverrides: {
                        root: {
                            border: "1px solid #BFD4D4",
                            height: "43px",
                            borderRadius: "5px",
                            justifyContent: "center",
                            marginTop: "5px",
                            "& fieldset": {
                                border: "none",
                            },
                            "& .MuiOutlinedInput-root": {
                                mt: "0px",
                            },
                            "& .MuiInputBase-input": {
                                padding: "0px 14px 5px"
                            }
                        }
                    }
                },
                MuiButton: {
                    variants: [
                        {
                            props: { variant: "wpbkThemeBtn" },
                            style: {
                                borderColor: "none",
                                backgroundColor: "#036666",
                                color: "#FFFFFF",
                                textTransform: "capitalize",
                                padding: "16px 0px",
                                width: "13em",
                                height: "45px",
                                "&:hover": {
                                    backgroundColor: "#025151",
                                    color: "#FFFFFF"
                                },
                                "&.Mui-disabled": {
                                    color: "#FFFFFF",
                                    opacity: 0.7,
                                },
                                "& .MuiLoadingButton-loadingIndicator": {
                                    color: "#FFFFFF",
                                }
                            },
                        },
                    ],
                },
            },
        }),
    };

    themeOptions = [
        {
            key: "default",
            title: __("Default Theme", "bookify"),
            desc: __("Easy on the eyes", "bookify"),
            illustration: (
                <img src={defaultThemeImg} alt="Default Theme" style={{height:197, marginBottom:10}} />
            )
        },
        {
            key: "light",
            title: __("Light Theme", "bookify"),
            desc: __("Clean and bright interface", "bookify"),
            illustration: (
                <img src={lightThemeImg} alt="Light Theme" style={{height:197, marginBottom:10}} />
            )
        }
    ];

    render() {
        const { state, setState } = this.props;
        const { theme } = this.state;

        return (
            <ThemeProvider theme={theme}>
                <Box component="div" sx={{mb:"2em"}}>
                    <Typography variant="h2">
                        {__("Choose Your Theme ", "bookify")}
                    </Typography>
                    <Typography variant="body1">
                        {__("Select the appearance that suits you best", "bookify")}
                    </Typography>
                </Box>
                <Grid container spacing={3} sx={{ mb: 4 }}>
                    {this.themeOptions.map((theme) => (
                        <Grid item xs={12} sm={6} key={theme.key}>
                            <Card
                                variant="outlined"
                                sx={{
                                    borderColor: state.theme === theme.key ? "#036666" : "#BFD4D4",
                                    borderWidth: 2,
                                    borderRadius: 2,
                                    boxShadow: state.theme === theme.key ? "0 2px 8px 0 rgba(3,102,102,0.08)" : "none",
                                    position: "relative",
                                    cursor: "pointer",
                                    transition: "border-color 0.2s",
                                    minHeight: 200,
                                    "&:hover": {
                                        borderColor: "#036666",
                                    },
                                }}
                                onClick={() => setState({ theme: theme.key })}
                            >
                                <CardActionArea>
                                    <CardContent>
                                        {theme.illustration}
                                        <Typography variant="subtitle1" sx={{fontWeight:600, color:"#111827"}}>
                                            {theme.title}
                                        </Typography>
                                        <Typography variant="body2" sx={{color:"#4b5563"}}>
                                            {theme.desc}
                                        </Typography>
                                    </CardContent>
                                    {state.theme === theme.key && (
                                        <CheckCircleIcon sx={{
                                            color: "#036666",
                                            position: "absolute",
                                            top: 2,
                                            right: 2,
                                            fontSize: 28,
                                            background: "#FFFFFF",
                                            borderRadius: "50%",
                                        }} />
                                    )}
                                </CardActionArea>
                            </Card>
                        </Grid>
                    ))}
                </Grid>
                <Box sx={{display:"flex", gap:"5px"}}>
                    <Typography variant="body1" sx={{color:"#DC2626", fontStyle:"italic"}}>
                        {__("Note:", "bookify")}
                    </Typography>
                    <Typography variant="body1" sx={{color:"#036666", fontStyle:"italic"}}>
                        {__("You can switch the theme later whenever you want.", "bookify")}
                    </Typography>
                </Box>
            </ThemeProvider>
        );
    }
}

export default ThemeWizard;