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

class GeneralSettingsWizard extends Component {
    state = {
        GeneralCurrencies: window.wp.hooks.applyFilters( "bookify_general_currencies_wizard", currencies ),
        DateFormat: window.wp.hooks.applyFilters("bookify_date_format_wizard", [
            "DD/MM/YY",
            "MM/DD/YY",
            "YY/MM/DD",
            "MMMM DD, YY",
        ]),
        GlobalSlotTimeDuration: window.wp.hooks.applyFilters("bookify_global_slot_time_duration_wizard", {
            "1": "1min",
            "5":  "5min",
            "10": "10min",
            "15": "15min",
            "30": "30min",
            "60": "1h",
            "90": "1h 30min",
            "120": "2h",
        }),
        GlobalSlotTimeInterval: window.wp.hooks.applyFilters("bookify_global_slot_time_interval_wizard", {
            "1": "1min",
            "5": "5min",
            "10": "10min",
            "15": "15min",
            "30": "30min",
        }),
        WeekStartOn: window.wp.hooks.applyFilters("bookify_week_start_on", [
            "Saturday",
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
        ]),
        TimeFormat: window.wp.hooks.applyFilters("bookify_time_format", [
            "12-hour",
            "24-hour",
        ]),
        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",
                    marginTop: "4px"
                },
                wpbkThemeLabel: {
                    color: "#111827",
                    fontFamily: "Figtree, sans-serif",
                    fontSize: "0.875rem",
                    fontWeight: "500",
                    lineHeight: "1.25rem",
                }
            },
            components: {
                MuiSelect: {
                    styleOverrides: {
                        root: {
                            border: "1px solid #BFD4D4",
                            height: "45px",
                            "& fieldset": {
                                border: "none",
                            },
                            "& .MuiOutlinedInput-root": {
                                mt: "0px",
                            },
                        }
                    }
                },
                MuiMenuItem: {
                    styleOverrides: {
                        root: {
                            marginLeft: "3px",
                            marginRight: "3px",
                            paddingLeft: "10px",
                            paddingRight: "10px",
                            borderRadius: "8px"
                        },
                    },
                },
            },
        }),
    };

    handleAllInputChange = (event) => {
        const { setState } = this.props;
        const { name, value } = event.target;
        setState(prevState => ({
            general: {
                ...prevState.general,
                [name] : value,
            }
        }));
    }

    render() {
        const { state } = this.props;
        const { theme, GeneralCurrencies, WeekStartOn, TimeFormat, DateFormat, GlobalSlotTimeDuration, GlobalSlotTimeInterval } = this.state;

        return (
            <ThemeProvider theme={theme}>
                <Box component="div" sx={{mb:"2em"}}>
                    <Typography variant="h2">
                        {__("General Settings", "bookify")}
                    </Typography>
                    <Typography variant="body1">
                        {__("Setup Currency, Date and Time etc.", "bookify")}
                    </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" htmlFor="DefaultGeneralCurrencies">
                                    {__("Set Currency", "bookify")}
                                </Typography>
                                <Select
                                    fullWidth
                                    name="DefaultGeneralCurrencies"
                                    id="DefaultGeneralCurrencies"
                                    value={state.general.DefaultGeneralCurrencies}
                                    onChange={this.handleAllInputChange}
                                    sx={{".MuiOutlinedInput-input": {lineHeight: "2rem", padding:"0px 14px"}}}
                                >
                                    {Object.values( GeneralCurrencies ).map( currency => (
                                        <MenuItem key={currency.code} value={currency.code}>
                                            {`${currency.code} - ${currency.name}`}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="DefaultWeekStartOn">
                                    {__("Week Starts On", "bookify")}
                                </Typography>
                                <Select
                                    fullWidth
                                    name="DefaultWeekStartOn"
                                    id="DefaultWeekStartOn"
                                    value={state.general.DefaultWeekStartOn}
                                    onChange={this.handleAllInputChange}
                                    sx={{".MuiOutlinedInput-input": {lineHeight: "2rem", padding:"0px 14px"}}}
                                >
                                    {WeekStartOn.map((value) => (
                                        <MenuItem key={value} value={value}>
                                            {value}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="DefaultTimeFormat">
                                    {__("Time Format", "bookify")}
                                </Typography>
                                <Select
                                    select
                                    fullWidth
                                    name="DefaultTimeFormat"
                                    id="DefaultTimeFormat"
                                    value={state.general.DefaultTimeFormat}
                                    onChange={this.handleAllInputChange}
                                    sx={{".MuiOutlinedInput-input": {lineHeight: "2rem", padding:"0px 14px"}}}
                                >
                                    {TimeFormat.map((value) => (
                                        <MenuItem key={value} value={value}>
                                            {value}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="DefaultDateFormat">
                                    {__("Date Format", "bookify")}
                                </Typography>
                                <Select
                                    select
                                    fullWidth
                                    name="DefaultDateFormat"
                                    id="DefaultDateFormat"
                                    value={state.general.DefaultDateFormat}
                                    onChange={this.handleAllInputChange}
                                    sx={{".MuiOutlinedInput-input": {lineHeight: "2rem", padding:"0px 14px"}}}
                                >
                                    {DateFormat.map((value) => (
                                        <MenuItem key={value} value={value}>
                                            {value}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="DefaultGlobalSlotTimeDuration">
                                    {__("Time Slot Duration (minutes)", "bookify")}
                                </Typography>
                                <Select
                                    select
                                    fullWidth
                                    name="DefaultGlobalSlotTimeDuration"
                                    id="DefaultGlobalSlotTimeDuration"
                                    value={state.general.DefaultGlobalSlotTimeDuration}
                                    onChange={this.handleAllInputChange}
                                    sx={{".MuiOutlinedInput-input": {lineHeight: "2rem", padding:"0px 14px"}}}
                                >
                                    {Object.entries(GlobalSlotTimeDuration).map(([key, value]) => (
                                        <MenuItem key={key} value={key}>
                                            {value}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="DefaultGlobalSlotTimeInterval">
                                    {__("Time Slot Interval (minutes)", "bookify")}
                                </Typography>
                                <Select
                                    select
                                    fullWidth
                                    name="DefaultGlobalSlotTimeInterval"
                                    id="DefaultGlobalSlotTimeInterval"
                                    value={state.general.DefaultGlobalSlotTimeInterval}
                                    onChange={this.handleAllInputChange}
                                    sx={{".MuiOutlinedInput-input": {lineHeight: "2rem", padding:"0px 14px"}}}
                                >
                                    {Object.entries(GlobalSlotTimeInterval).map(([key, value]) => (
                                        <MenuItem key={key} value={key}>
                                            {value}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>
                    </Grid>
                </Box>
            </ThemeProvider>
        );
    }
}

export default GeneralSettingsWizard;