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

class GeneralSettings extends Component {
    state = {
        GeneralCurrencies: window.wp.hooks.applyFilters( "bookify_general_currencies", currencies ),
        GlobalSlotTimeDuration: window.wp.hooks.applyFilters("bookify_global_slot_time_duration", {
            "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", {
            "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",
        ]),
        AppointmentStatus: window.wp.hooks.applyFilters("bookify_appointment_status", [
            "Pending",
            "Confirmed",
            "Completed",
            "Delayed",
            "On Hold",
            "Cancelled",
        ]),
        TimeFormat: window.wp.hooks.applyFilters("bookify_time_format", [
            "12-hour",
            "24-hour",
        ]),
        DateFormat: window.wp.hooks.applyFilters("bookify_date_format", [
            "DD/MM/YY",
            "MM/DD/YY",
            "YY/MM/DD",
            "MMMM DD, YY",
        ]),
        PriorToBooking: [
            "Enable",
            "Disable",
        ],
        generalFormData: {
            DefaultGlobalSlotTimeDuration: "30",
            DefaultGlobalSlotTimeInterval: "15",
            DefaultWeekStartOn: "Saturday",
            DefaultAppointmentStatus: "Pending",
            DefaultTimeFormat: "12-hour",
            DefaultDateFormat: "DD/MM/YY",
            DefaultGeneralCurrencies: "USD",
            DefaultPriorToBooking: "Disable",
            PriorTimeToBooking: "3",
            MaxBookingsPerEmailPerDay: '5',
            usersCanBook: "registerAfterBook",
            multipleBooking: false,
            slotsTimezone: false,
            supportLinkText: "Need Help?",
            supportLinkUrl: "",
            showFormSupportLink: false,
            deleteDataWhenUnistall: false,
        },
        snackbarOpen: false,
        snackbarMessage: "",
        snackbarType: "",
        loading: false,
        theme: createTheme({
            typography: {
                h3: {
                    fontSize: "2em",
                    fontWeight: "500",
                    textTransform: "capitalize",
                    color: "#042626",
                },
                body1: {
                    color: "#587373", 
                    marginTop: "5px"
                },
                wpbkThemeLabel: {
                    color: "#042626",
                    fontSize: "15px",
                    fontWeight: "500",
                    paddingBottom: "5px",
                }
            },
            components: {
                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",
                                }
                            },
                        },
                    ],
                },
                MuiMenuItem: {
                    styleOverrides: {
                        root: {
                            marginLeft: "3px",
                            marginRight: "3px",
                            paddingLeft: "10px",
                            paddingRight: "10px",
                            borderRadius: "8px"
                        },
                    },
                },
                MuiSwitch: {
                    styleOverrides: {
                        root: {
                            width: "40px",
                            height: "23px",
                            padding: "0px",
                            borderRadius: "13px"
                        },
                        switchBase: {
                            padding: "0px",
                            margin: "3px",
                            transitionDuration: "300ms",
                            "&.Mui-checked": {
                                transform: "translateX(17px)",
                                color: "#FFFFFF",
                                "& .MuiSwitch-thumb": {
                                    color: "#EBF8F8",
                                },
                                "& + .MuiSwitch-track": {
                                    backgroundColor: "#036666",
                                    opacity: 1,
                                    border: "none",
                                },
                                "&.Mui-disabled + .MuiSwitch-track": {
                                    opacity: 0.5,
                                },
                            },
                            "&.Mui-focusVisible .MuiSwitch-thumb": {
                                color: "#33cf4d",
                                border: "6px solid #FFFFFF",
                            },
                            "&.Mui-disabled .MuiSwitch-thumb": {
                                opacity: 0.5,
                            },
                            "&.Mui-disabled + .MuiSwitch-track": {
                                opacity: 0.7,
                            },
                            "& .MuiSwitch-input": {
                                border: "none",
                                background: "none",
                                display: "none"
                            }
                        },
                        thumb: {
                            width: "17px",
                            height: "17px",
                            color: "#036666"
                        },
                        track: {
                            borderRadius: "13px",
                            backgroundColor: "#EBF8F8",
                            opacity: 1,
                            transition: "background-color 500ms",
                            border: "1px solid #BFD4D4",
                            height: "auto"
                        },
                    },
                },
            },
        }),
    };

    componentDidMount() {
        if ( this.props.savedGeneralSettings ) {
            this.setState({
                generalFormData: {
                    DefaultGlobalSlotTimeDuration: this.props.savedGeneralSettings.DefaultGlobalSlotTimeDuration || "30",
                    DefaultGlobalSlotTimeInterval: this.props.savedGeneralSettings.DefaultGlobalSlotTimeInterval || "15",
                    DefaultWeekStartOn: this.props.savedGeneralSettings.DefaultWeekStartOn || "Saturday",
                    DefaultAppointmentStatus: this.props.savedGeneralSettings.DefaultAppointmentStatus || "Pending",
                    DefaultTimeFormat: this.props.savedGeneralSettings.DefaultTimeFormat || "12-hour",
                    DefaultDateFormat: this.props.savedGeneralSettings.DefaultDateFormat || "DD/MM/YY",
                    DefaultGeneralCurrencies: this.props.savedGeneralSettings.DefaultGeneralCurrencies || "USD",
                    DefaultPriorToBooking: this.props.savedGeneralSettings.DefaultPriorToBooking || "Disable",
                    PriorTimeToBooking: this.props.savedGeneralSettings.PriorTimeToBooking || "3",
                    MaxBookingsPerEmailPerDay: this.props.savedGeneralSettings.MaxBookingsPerEmailPerDay || '5',
                    usersCanBook: this.props.savedGeneralSettings.usersCanBook || "registerAfterBook",
                    multipleBooking: this.props.savedGeneralSettings.multipleBooking || false,
                    slotsTimezone: this.props.savedGeneralSettings.slotsTimezone || false,
                    supportLinkText: this.props.savedGeneralSettings.supportLinkText || "Need Help?",
                    supportLinkUrl: this.props.savedGeneralSettings.supportLinkUrl || "",
                    showFormSupportLink: this.props.savedGeneralSettings.showFormSupportLink || false,
                    deleteDataWhenUnistall: this.props.savedGeneralSettings.deleteDataWhenUnistall || false,
                }
            });
        }
    }

    handleClose = () => this.props.onClose && this.props.onClose();

    handleAllInputChange = (event) => {
        const { name, type, value, checked } = event.target;
        this.setState(prevState => ({
            generalFormData: {
                ...prevState.generalFormData,
                [name]: type === "checkbox" ? checked : value,
            }
        }));
    }

    SaveGeneralSettings = () => {
        const { generalFormData } = this.state;
        const ProMultipleBooking = window.ProMultipleBooking;
        const ProSlotTimezone = window.ProSlotTimezone;
        this.setState({ loading: true });
        
        const dataToSend = {};
        dataToSend.DefaultGlobalSlotTimeDuration = generalFormData.DefaultGlobalSlotTimeDuration;
        dataToSend.DefaultGlobalSlotTimeInterval = generalFormData.DefaultGlobalSlotTimeInterval;
        dataToSend.DefaultWeekStartOn = generalFormData.DefaultWeekStartOn;
        dataToSend.DefaultAppointmentStatus = generalFormData.DefaultAppointmentStatus;
        dataToSend.DefaultTimeFormat = generalFormData.DefaultTimeFormat;
        dataToSend.DefaultDateFormat = generalFormData.DefaultDateFormat;
        dataToSend.DefaultGeneralCurrencies = generalFormData.DefaultGeneralCurrencies;
        dataToSend.DefaultPriorToBooking = generalFormData.DefaultPriorToBooking;
        dataToSend.PriorTimeToBooking = generalFormData.PriorTimeToBooking;
        dataToSend.MaxBookingsPerEmailPerDay = generalFormData.MaxBookingsPerEmailPerDay;
        dataToSend.usersCanBook = generalFormData.usersCanBook;
        dataToSend.supportLinkText = generalFormData.supportLinkText;
        dataToSend.supportLinkUrl = generalFormData.supportLinkUrl;
        dataToSend.showFormSupportLink = generalFormData.showFormSupportLink;
        dataToSend.deleteDataWhenUnistall = generalFormData.deleteDataWhenUnistall;

        if ( ProMultipleBooking ) {
            dataToSend.multipleBooking = generalFormData.multipleBooking;
        }

        if ( ProSlotTimezone ) {
            dataToSend.slotsTimezone = generalFormData.slotsTimezone;
        }
    
        fetch(`${wpbAdmin.root}bookify/v1/save-general-settings`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend),
        })
        .then(response => response.json())
        .then((response) => {
            if ( response.success ) {
                this.setState({ 
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "success",
                    loading: false
                });
                this.handleClose();
            } else {
                this.setState({ 
                    snackbarOpen: true, 
                    snackbarMessage: response.message, 
                    snackbarType:  "error",
                    loading: false
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            this.setState({ loading: false });
        })
    };

    render() {
        const { theme, generalFormData, GlobalSlotTimeDuration, GlobalSlotTimeInterval, WeekStartOn, AppointmentStatus, TimeFormat, DateFormat, GeneralCurrencies, PriorToBooking, snackbarOpen, snackbarMessage, snackbarType, loading } = this.state;
        
        const ProMultipleBooking = window.ProMultipleBooking;
        const ProSlotTimezone = window.ProSlotTimezone;

        return (
            <>
                <ThemeProvider theme={theme}>
                    <Box component="div" sx={{mb:"4em"}}>
                        <Typography variant="h3">{__("General Settings", "bookify")}</Typography>
                        <Typography variant="body1">{__("Manage your time, currency, and other booking settings.", "bookify")}</Typography>
                    </Box>
                    <Box component="form" sx={{display:"flex", gap:"3em"}}>
                        <Grid container spacing={4} direction="column">
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-global-slot-time-duration" >
                                        {__("Time Slot Duration", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-global-slot-time-duration" 
                                        name="DefaultGlobalSlotTimeDuration" 
                                        value={generalFormData.DefaultGlobalSlotTimeDuration} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {Object.entries(GlobalSlotTimeDuration).map(([key, value]) => (
                                            <MenuItem key={key} value={key}>
                                                {value}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-global-time-interval" >
                                        {__("Time Slot Interval", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-global-time-interval" 
                                        name="DefaultGlobalSlotTimeInterval" 
                                        value={generalFormData.DefaultGlobalSlotTimeInterval} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {Object.entries(GlobalSlotTimeInterval).map(([key, value]) => (
                                            <MenuItem key={key} value={key}>
                                                {value}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-week-start" >
                                        {__("Week Start On", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-week-start" 
                                        name="DefaultWeekStartOn" 
                                        value={generalFormData.DefaultWeekStartOn} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {WeekStartOn.map((value) => (
                                            <MenuItem key={value} value={value}>
                                                {value}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-appointment-status" >
                                        {__("Default Appointment Status", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-appointment-status" 
                                        name="DefaultAppointmentStatus" 
                                        value={generalFormData.DefaultAppointmentStatus} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {AppointmentStatus.map((value) => (
                                            <MenuItem key={value} value={value}>
                                                {value}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-time-format" >
                                        {__("Time Format", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-time-format" 
                                        name="DefaultTimeFormat" 
                                        value={generalFormData.DefaultTimeFormat} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {TimeFormat.map((value) => (
                                            <MenuItem key={value} value={value}>
                                                {value}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-date-format" >
                                        {__("Date Format", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-date-format" 
                                        name="DefaultDateFormat" 
                                        value={generalFormData.DefaultDateFormat} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {DateFormat.map((value) => (
                                            <MenuItem key={value} value={value}>
                                                {value}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <FormControlLabel 
                                        control={<Switch color="primary"/>} 
                                        label={(
                                            <Box sx={{display: "flex", alignItems: "center"}}>
                                                <Typography sx={{color:"#354052", mt:0, ml:"15px"}}>
                                                    {__("Show Frontend Support Link")}
                                                </Typography>
                                            </Box>
                                        )}
                                        labelPlacement="end" 
                                        name={"showFormSupportLink"}
                                        checked={JSON.parse(generalFormData.showFormSupportLink)}
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            ml: 0,
                                            "&.MuiFormControlLabel-label": {
                                                mt: 0,
                                            },
                                        }}
                                    />
                                </FormControl>
                            </Grid>
                            <Grid item sx={{pt:"10px !important"}}>
                                <FormControl fullWidth>
                                    <FormControlLabel 
                                        control={<Switch color="primary"/>} 
                                        label={(
                                            <Box sx={{display: "flex", alignItems: "center"}}>
                                                <Typography sx={{color:"#354052", mt:0, ml:"15px"}}>
                                                    {__("Remove all plugin data on uninstall?")}
                                                </Typography>
                                            </Box>
                                        )}
                                        labelPlacement="end" 
                                        name={"deleteDataWhenUnistall"}
                                        checked={JSON.parse(generalFormData.deleteDataWhenUnistall)}
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            ml: 0,
                                            "&.MuiFormControlLabel-label": {
                                                mt: 0,
                                            },
                                        }}
                                    />
                                </FormControl>
                            </Grid>
                            {ProMultipleBooking && (
                                <Grid item sx={{pt:"10px !important"}}>
                                    <ProMultipleBooking
                                        formData={generalFormData}
                                        setState={this.setState.bind(this)}
                                        handleAllInputChange={this.handleAllInputChange}
                                        theme={theme}
                                    />
                                </Grid>
                            )}
                            {ProSlotTimezone && (
                                <Grid item sx={{pt:"10px !important"}}>
                                    <ProSlotTimezone
                                        formData={generalFormData}
                                        setState={this.setState.bind(this)}
                                        handleAllInputChange={this.handleAllInputChange}
                                        theme={theme}
                                    />
                                </Grid>
                            )}
                        </Grid>
                        <Grid container spacing={4} direction="column">
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-currency" >
                                        {__("Currency", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-currency" 
                                        name="DefaultGeneralCurrencies" 
                                        value={generalFormData.DefaultGeneralCurrencies} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {Object.values( GeneralCurrencies ).map( currency => (
                                            <MenuItem key={currency.code} value={currency.code}>
                                                {`${currency.code} - ${currency.name}`}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="max-bookings-per-email-per-day" >
                                        {__("Maximum Bookings Per Email Per Day", "bookify")}
                                    </Typography>
                                    <TextField
                                        id="max-bookings-per-email-per-day"
                                        type="number" 
                                        name="MaxBookingsPerEmailPerDay" 
                                        value={generalFormData.MaxBookingsPerEmailPerDay} 
                                        onChange={this.handleAllInputChange}
                                        inputProps={{
                                            min: 0,
                                        }}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "43px",
                                            borderRadius: "4px",
                                            justifyContent: "center",
                                            marginTop: "5px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiInputBase-input": {
                                                padding: "0px 14px",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    />
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-prior-booking" >
                                        {__("Minimum Time Requirement Prior To Booking", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="bookify-prior-booking" 
                                        name="DefaultPriorToBooking" 
                                        value={generalFormData.DefaultPriorToBooking} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        {PriorToBooking.map((value) => (
                                            <MenuItem key={value} value={value}>
                                                {value}
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            {generalFormData.DefaultPriorToBooking === "Enable" && (
                                <Grid item>
                                    <FormControl fullWidth>
                                        <Typography variant="wpbkThemeLabel" component="label" htmlFor="bookify-limited-booking" >
                                            {__("Limited Booking Month(s)", "bookify")}
                                        </Typography>
                                        <TextField
                                            id="bookify-limited-booking"
                                            type="number" 
                                            name="PriorTimeToBooking" 
                                            value={generalFormData.PriorTimeToBooking} 
                                            onChange={this.handleAllInputChange}
                                            inputProps={{
                                                min: 0,
                                            }}
                                            sx={{
                                                border: "1px solid #BFD4D4",
                                                height: "43px",
                                                borderRadius: "4px",
                                                justifyContent: "center",
                                                marginTop: "5px",
                                                "& fieldset": {
                                                    border: "none",
                                                },
                                                "& .MuiInputBase-input": {
                                                    padding: "0px 14px",
                                                },
                                                "& .MuiOutlinedInput-root": {
                                                    mt: "0px",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            )}
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="customer-booking-behavior">
                                        {__("Customer Booking Behavior", "bookify")}
                                    </Typography>
                                    <Select 
                                        id="customer-booking-behavior"
                                        name="usersCanBook"
                                        value={generalFormData.usersCanBook}
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "45px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                        }}
                                    >
                                        <MenuItem value="registerAfterBook">
                                            {__("Create A New Customer On Booking", "bookify")}
                                        </MenuItem>
                                        <MenuItem value="onlyRegistered">
                                            {__("Only Registered Customer Can Book", "bookify")}
                                        </MenuItem>
                                        <MenuItem value="guestBooking">
                                            {__("Allow Guest Booking (No Login Required)", "bookify")}
                                        </MenuItem>
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="support-link-text" >
                                        {__("Support Link Text", "bookify")}
                                    </Typography>
                                    <TextField
                                        id="support-link-text"
                                        name="supportLinkText" 
                                        value={generalFormData.supportLinkText} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "43px",
                                            borderRadius: "5px",
                                            justifyContent: "center",
                                            marginTop: "5px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                            "& .MuiInputBase-input": {
                                                padding: "0px 14px"
                                            }
                                        }}
                                    />
                                </FormControl>
                            </Grid>
                            <Grid item>
                                <FormControl fullWidth>
                                    <Typography variant="wpbkThemeLabel" component="label" htmlFor="support-link-url" >
                                        {__("Support Link URL", "bookify")}
                                    </Typography>
                                    <TextField
                                        id="support-link-url"
                                        name="supportLinkUrl" 
                                        value={generalFormData.supportLinkUrl} 
                                        onChange={this.handleAllInputChange}
                                        sx={{
                                            border: "1px solid #BFD4D4",
                                            height: "43px",
                                            borderRadius: "5px",
                                            justifyContent: "center",
                                            marginTop: "5px",
                                            "& fieldset": {
                                                border: "none",
                                            },
                                            "& .MuiOutlinedInput-root": {
                                                mt: "0px",
                                            },
                                            "& .MuiInputBase-input": {
                                                padding: "0px 14px"
                                            }
                                        }}
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                    </Box> 
                    <LoadingButton variant="wpbkThemeBtn" onClick={this.SaveGeneralSettings} loading={loading} sx={{mt:"4em"}}>
                        {__("Save Settings", "bookify")}
                    </LoadingButton>
                </ThemeProvider>
                <SnackbarNotice
                    state={this.state}
                    setState={this.setState.bind(this)}
                    open={snackbarOpen}
                    message={snackbarMessage}
                    type={snackbarType}
                />
            </>
        );
    }
}

export default GeneralSettings;