import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Box, Grid, Typography, TextField, FormControl, Select, MenuItem } from "@mui/material";

class GeneralSettingsWizard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            apbgf_start_of_week: "monday",
            apbgf_time_interval: "5",
            apbgf_time_duration: "30",
            apbgf_calendar_timeslot_format: "24",
            errors: {},
            theme: createTheme({
                typography: {
                    fontFamily: 'Poppins-Medium, Poppins, sans-serif',
                    h3: {
                        fontSize: "2em",
                        fontWeight: "500",
                        textTransform: "capitalize",
                        color: "#042626",
                    },
                    body1: {
                        color: "#587373",
                        marginTop: "5px",
                    },
                    wpbkThemeLabel: {
                        color: "#042626",
                        fontSize: "15px",
                        fontWeight: "500",
                        paddingBottom: "5px",
                    },
                },
                components: {
                    MuiSelect: {
                        styleOverrides: {
                            root: {
                                border: "1px solid #57b0ee",
                                height: "45px",
                                '& .MuiInputBase-input': {
                                    fontSize: '12px',
                                    padding: '5px 14px 5px',
                                    border: "none",
                                },
                            },
                        },
                    },
                    MuiOutlinedInput: {
                        styleOverrides: {
                            root: {
                                borderRadius: '5px',
                                height: '38px',
                                marginTop: '5px',
                                '& fieldset': {
                                    border: 'none',
                                },
                                '& .MuiInputBase-input': {
                                    fontSize: '12px',
                                    padding: '5px 14px 5px',
                                    border: '1px solid #57b0ee',
                                    '&:focus': {
                                        outline: 0,
                                        borderColor: '#57b0ee',
                                        boxShadow: 'none',
                                    }
                                },
                            },
                        },
                    },
                    MuiMenuItem: {
                        styleOverrides: {
                            root: {
                                marginLeft: "3px",
                                marginRight: "3px",
                                paddingLeft: "10px",
                                paddingRight: "10px",
                                borderRadius: "8px",
                            },
                        },
                    },
                },
            }),
        };
    }

    componentDidMount() {
        if (this.props.data?.general) {
            this.setState({ ...this.props.data.general });
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState !== this.state) {
            this.props.saveStep("general", this.state);
        }
    }

    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    };

    validate = () => {
        return true;
    };

    render() {
        const form = this.state;
        const { theme, errors } = this.state;
        
        if (this.props.onValidate) {
            this.props.onValidate(this.validate);
        }

        return (
            <ThemeProvider theme={theme}>
                <Box component="div" sx={{ mb: "4em" }}>
                    <Typography variant="h3">{__("General Settings", "apbgf")}</Typography>
                    <Typography variant="body1" sx={{ mt: 1 }}>
                        {__("Setup your general settings below", "apbgf")}
                    </Typography>
                </Box>

                <Box component="form">
                    <Grid container spacing={3} sx={{ mb: 4 }}>
                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label">
                                    {__("Start Day of Week", "apbgf")}
                                </Typography>
                                <Select
                                    name="apbgf_start_of_week"
                                    value={form.apbgf_start_of_week}
                                    onChange={this.handleChange}
                                >
                                    <MenuItem value="monday">{__("Monday", "apbgf")}</MenuItem>
                                    <MenuItem value="sunday">{__("Sunday", "apbgf")}</MenuItem>
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label">
                                    {__("Timeslot Format on Calendar", "apbgf")}
                                </Typography>
                                <Select
                                    name="apbgf_calendar_timeslot_format"
                                    value={form.apbgf_calendar_timeslot_format}
                                    onChange={this.handleChange}
                                >
                                    <MenuItem value="12">{__("12 Hours", "apbgf")}</MenuItem>
                                    <MenuItem value="24">{__("24 Hours", "apbgf")}</MenuItem>
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label">
                                    {__("Time Slot Interval (minutes)", "apbgf")}
                                </Typography>
                                <TextField
                                    name="apbgf_time_interval"
                                    type="number"
                                    min="1"
                                    value={form.apbgf_time_interval}
                                    onChange={this.handleChange}
                                />
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label">
                                    {__("Time Slot Duration (minutes)", "apbgf")}
                                </Typography>
                                <TextField
                                    name="apbgf_time_duration"
                                    type="number"
                                    min="1"
                                    value={form.apbgf_time_duration}
                                    onChange={this.handleChange}
                                />
                            </FormControl>
                        </Grid>
                    </Grid>
                </Box>
            </ThemeProvider>
        );
    }
}

export default GeneralSettingsWizard;