import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { 
    Dialog, DialogTitle, DialogContent, DialogActions, Box,
    Divider, IconButton, Grid, FormControl, Typography,
    Chip, Select, MenuItem, TextField, Button
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import {SnackbarNotice} from "../../functions";
import LoadingButton from "@mui/lab/LoadingButton";

class AddAppointment extends Component { 

    state = { 
        services: [],
        staffs: [],
        daysOpen: [],
        specialDates: [],
        holidays: [],
        slots: [],
        servicePrice: "",
        statuses: [
            "Pending",
            "Confirmed",
            "Completed",
            "Delayed",
            "On Hold",
            "Cancelled"
        ],
        addFormData: {
            appointmentStaff: "",
            appointmentLocation: "",
            appointmentService: "",
            appointmentDate: null,
            appointmentDuration: [],
            appointmentCustomer: "",
            appointmentStatus: "",
            appointmentNote: "",
        },
        errors: {
            appointmentLocation: false,
            appointmentService: false,
            appointmentStaff: false,
            appointmentDate: false,
            appointmentDuration: false,
            appointmentStatus: false,
            appointmentCustomer: false,
        },
        snackbarOpen: false,
        snackbarMessage: "",
        snackbarType: "",
        loading: false,
        theme: createTheme({
            typography: {
                wpbkThemeLabel: {
                    color: "#042626",
                    fontSize: "15px",
                    fontWeight: "500",
                    paddingBottom: "5px",
                }
            },
            components: {
                MuiButton: {
                    variants: [
                        {
                            props: { variant: "wpbkThemeModalBtn" },
                            style: {
                                borderColor: "none",
                                backgroundColor: "#036666",
                                color: "#FFFFFF",
                                textTransform: "capitalize",
                                height: "40px",
                                "&:hover": {
                                    backgroundColor: "#025151",
                                    color: "#FFFFFF"
                                },
                                "&.Mui-disabled": {
                                    color: "#FFFFFF",
                                    opacity: 0.7,
                                },
                                "& .MuiLoadingButton-loadingIndicator": {
                                    color: "#FFFFFF",
                                }
                            },
                        },
                        {
                            props: { variant: "wpbkCancelbtn"},
                            style: {
                                textTransform: "capitalize",
                                height: "40px",
                                color: "#036666",
                                "&:hover": {
                                    backgroundColor: "#DDEEEE",
                                },
                            }
                        }
                    ]
                },
                MuiMenuItem: {
                    styleOverrides: {
                        root: {
                            marginLeft: "3px",
                            marginRight: "3px",
                            paddingLeft: "10px",
                            paddingRight: "10px",
                            borderRadius: "8px"
                        },
                    },
                },
            }
        })
    };

    handleClose = () => {
        this.setState({
          addFormData: {
            appointmentLocation: "",
            appointmentService: "",
            appointmentStaff: "",
            appointmentDate: null,
            appointmentDuration: [],
            appointmentCustomer: "",
            appointmentNote: "",
          }
        }, () => {
          this.props.onClose && this.props.onClose();
        });
    };

    handleLocationChange = (event) => {
        const { value } = event.target;

        const dataToSend = {};
        dataToSend.location_id = value;

        fetch(`${wpbAdmin.root}bookify/v1/services-by-location`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then(data => {
            this.setState(prevState => ({
                addFormData: {
                    ...prevState.formData,
                    appointmentLocation: value,
                    appointmentService: "",
                    appointmentStaff: "",
                    appointmentDate: null,
                    appointmentDuration: [],
                    appointmentCustomer: "",
                },
                errors: { ...prevState.errors, appointmentLocation: false },
                services: data.services,
                staffs: [],
                slots: [],
                daysOpen: [],
                specialDate: [],
                holidays: []
            }));
        })
        .catch(error => {
            console.error("Error:", error);
        })
    }

    handleServiceChange = (event) => {
        const { value } = event.target;
    
        const dataToSend = {};
        dataToSend.service_id = value;
    
        fetch(`${wpbAdmin.root}bookify/v1/staffs-by-service`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then(data => {
            this.setState(prevState => ({
                addFormData: {
                    ...prevState.addFormData,
                    appointmentService: value,
                    appointmentDuration: [],
                    appointmentStaff: "",
                    appointmentDate: null,
                },
                errors: { ...prevState.errors, appointmentService: false },
                staffs: data.staffs,
                slots: [],
                daysOpen: [],
                specialDate: [],
                holidays: []
            }));
        })
        .catch(error => {
            console.error("Error:", error);
        })
    }

    handleStaffChange = ( event ) => {
        const { value } = event.target;
        const { staffs } = this.state;
        const selectedStaff = staffs.find(staff => staff.staff_id === value);
        const priceByStaff = selectedStaff.service_price;

        const dataToSend = {};
        dataToSend.staff_id = value;

        fetch(`${wpbAdmin.root}bookify/v1/dates-by-staff`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then(data => {
            this.setState(prevState => ({
                addFormData: {
                    ...prevState.addFormData,
                    appointmentStaff: value,
                    appointmentDate: null,
                    appointmentDuration: [],
                },
                errors: { ...prevState.errors, appointmentStaff: false },
                daysOpen: data.dates,
                specialDate: data.special,
                holidays: data.holidays,
                servicePrice: priceByStaff
            }));
        })
        .catch(error => {
            console.error("Error:", error);
        })
    }

    handleDateChange = (date) => {
        const weekDay = date.day();
        const selectedDate = dayjs(date).format("YYYY-MM-DD");
        const { addFormData } = this.state;
    
        const { daysOpen, specialDate } = this.state;
    
        let timeSlots = [];

        let isSpecialDate = false;
        for (let key in specialDate) {
            if (specialDate[key].date === selectedDate) {
                timeSlots = specialDate[key].slots;
                isSpecialDate = true;
                break;
            }
        }

        if ( ! isSpecialDate ) {
            for (let key in daysOpen) {
                if (daysOpen[weekDay]) {
                    timeSlots = daysOpen[weekDay].slots;
                    break;
                }
            }
        }

        const dataToSend = {};
        dataToSend.date = selectedDate;
        dataToSend.slots = JSON.stringify(timeSlots);
        dataToSend.staff_id = addFormData.appointmentStaff;
        
        fetch(`${wpbAdmin.root}bookify/v1/available-slots`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then(data => {
            this.setState(prevState => ({
                addFormData: {
                    ...prevState.addFormData,
                    appointmentDate: date,
                    appointmentDuration: []
                },
                errors: { ...prevState.errors, appointmentDate: false },
                slots: data.available_slots,
            }));
        })
        .catch(error => {
            console.error("Error:", error);
        })
    };

    shouldDisableDate = (date) => {
        const { daysOpen, holidays, specialDate } = this.state;
        const day = date.day();

        const specialDates = Object.values(specialDate).map(entry => entry.date);

		if (specialDates.includes(date.format("YYYY-MM-DD"))) {
			return false;
		}

        if (daysOpen.length <= 0) {
            return true;
        }
    
        const eachDay = Object.keys(daysOpen).map(day => parseInt(day));
        const isDayOpen = eachDay.includes(day);
        
        if (holidays.length > 0) {
            const holidayObjects = JSON.parse(holidays);
            const holidayDates = Object.values(holidayObjects).map(holiday => holiday.dateFormated);
            const isHoliday = holidayDates.includes(date.format("YYYY-MM-DD"));

            return !isDayOpen || isHoliday;
        }

        return !isDayOpen;
    }

    handleInputChange = (event) => {
        const { name, value } = event.target;
        this.setState(prevState => ({
            addFormData: {
                ...prevState.addFormData,
                [name]: value,
            },
            errors: { ...prevState.errors, [name]: false }
        }));
    };

    AddAppointmentDetails = () => {
        const { addFormData, servicePrice } = this.state;
        const { fetchCalendarData } = this.props;
        const ProLocation = window.ProLocation;

        const errors = {
            appointmentLocation: addFormData.appointmentLocation === "" || !addFormData.appointmentLocation,
            appointmentService: addFormData.appointmentService === "" || !addFormData.appointmentService,
            appointmentStaff: addFormData.appointmentStaff === "" || !addFormData.appointmentStaff,
            appointmentDate: !addFormData.appointmentDate,
            appointmentDuration: addFormData.appointmentDuration.length === 0 || !addFormData.appointmentDuration,
            appointmentStatus: !addFormData.appointmentStatus,
            appointmentCustomer: addFormData.appointmentCustomer === "" || !addFormData.appointmentCustomer,
        };
    
        this.setState({ errors });
    
        if ( errors.appointmentStaff || errors.appointmentService || errors.appointmentDate || errors.appointmentDuration || errors.appointmentCustomer || errors.appointmentStatus ) {
            return;
        }

        if ( ProLocation && errors.appointmentLocation ) {
            return;
        }

        const totalPrice = servicePrice * ( typeof addFormData.appointmentDuration == "string" ? 1 : addFormData.appointmentDuration.length );

        this.setState({ loading: true });
    
        const dataToSend = {};
        if ( ProLocation ) {
            dataToSend.appointment_location = addFormData.appointmentLocation;
        }
        dataToSend.appointment_service = addFormData.appointmentService;
        dataToSend.appointment_staff = addFormData.appointmentStaff;
        dataToSend.appointment_date = addFormData.appointmentDate ? addFormData.appointmentDate.format( "YYYY-MM-DD" ) : "";
        dataToSend.appointment_duration = Array.isArray(addFormData.appointmentDuration) ? addFormData.appointmentDuration.join(',') : addFormData.appointmentDuration;
        dataToSend.appointment_price = totalPrice;
        dataToSend.customer_id = addFormData.appointmentCustomer;
        dataToSend.appointment_status = addFormData.appointmentStatus;
        dataToSend.note = addFormData.appointmentNote;

        fetch(`${wpbAdmin.root}bookify/v1/add-appointment`, {
            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();
                fetchCalendarData();
            } else {
                this.setState({ 
                    snackbarOpen: true, 
                    snackbarMessage: response.message, 
                    snackbarType:  "error",
                    loading: false,
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            this.setState({ loading: false });
        })
    };

    render() { 
        const { open, locations, customers, dateFormat, priorToggle, priorTime, defaultStatus } = this.props;
        const { theme, addFormData, errors, staffs, slots, snackbarOpen, snackbarMessage, snackbarType, statuses, loading } = this.state;
        const ProLocation = window.ProLocation;
        const allServices = ProLocation ? this.state.services : this.props.services;
        const ProMultipleBooking = window.ProMultipleBooking;

        const appointmentStaffData = staffs.find(staff => staff.staff_id === addFormData.appointmentStaff);
        const staffMultipleBooking = appointmentStaffData ? JSON.parse( appointmentStaffData.mulitple_booking ) : false;

        addFormData.appointmentStatus = addFormData.appointmentStatus ? addFormData.appointmentStatus : defaultStatus;

        let maxDate = null;
        if ( priorToggle == "Enable" ) {
            maxDate = dayjs().add(parseInt(priorTime), "month");
        }

        return (
            <>  
                <ThemeProvider theme={theme}>
                    <Dialog onClose={this.handleClose} open={open} fullWidth maxWidth={"sm"} sx={{height:"80%", padding:"4% 0%"}}>
                        <DialogTitle sx={{display:"flex", alignItems:"center"}}>
                            {__("Add Appointment", "bookify")}
                            <IconButton
                                onClick={this.handleClose}
                                sx={{
                                    position: "absolute",
                                    right: 8,
                                    top: 8,
                                    color: (theme) => theme.palette.grey[500],
                                    "&:hover": {
                                        backgroundColor: "#DDEEEE",
                                    },
                                }}
                            >
                                <CloseIcon sx={{fontSize:"1rem"}} />
                            </IconButton>
                        </DialogTitle>

                        <Divider sx={{borderColor:"#DDEEEE"}} />

                        <DialogContent>
                            <Box component="form">
                                <Grid container spacing={3} direction="column">
                                    {ProLocation && (
                                        <Grid item>
                                            <FormControl fullWidth>
                                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-location">
                                                    {__("Locations ", "bookify")}
                                                    <span style={{color:"#A61616"}}>*</span>
                                                </Typography>
                                                <Select
                                                    id="appointment-location"
                                                    name="appointmentLocation"
                                                    required
                                                    error={errors.appointmentLocation}
                                                    value={addFormData.appointmentLocation}
                                                    onChange={this.handleLocationChange}
                                                    sx={{
                                                        height: "45px",
                                                        "& fieldset": {
                                                            border: "none",
                                                        },
                                                        "&.MuiOutlinedInput-root": {
                                                            mt: "0px",
                                                            border: "1px solid",
                                                            borderColor: errors.appointmentLocation ? "error.main" : "#BFD4D4",
                                                        },
                                                    }}
                                                >
                                                    <MenuItem value="" disabled>
                                                        {__("Select Location", "bookify")}
                                                    </MenuItem>
                                                    {locations.map((value) => (
                                                        <MenuItem key={value.id} value={value.id}>
                                                            {value.location_name}
                                                        </MenuItem>
                                                    ))}
                                                </Select>
                                            </FormControl>
                                        </Grid>
                                    )}
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-services">
                                                {__("Services ", "bookify")}
                                                <span style={{color:"#A61616"}}>*</span>
                                            </Typography>
                                            <Select
                                                id="appointment-services"
                                                name="appointmentService"
                                                required
                                                error={errors.appointmentService}
                                                value={addFormData.appointmentService}
                                                onChange={this.handleServiceChange}
                                                sx={{
                                                    height: "45px",
                                                    "& fieldset": {
                                                        border: "none",
                                                    },
                                                    "&.MuiOutlinedInput-root": {
                                                        mt: "0px",
                                                        border: "1px solid",
                                                        borderColor: errors.appointmentService ? "error.main" : "#BFD4D4",
                                                        
                                                    },
                                                }}
                                            >
                                                <MenuItem disabled>
                                                    {__("Select Service", "bookify")}
                                                </MenuItem>
                                                {allServices.map((value) => (
                                                    <MenuItem key={value.id} value={value.id}>
                                                        {value.service_name}
                                                    </MenuItem>
                                                ))}
                                            </Select>
                                        </FormControl>
                                    </Grid>
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-staffs">
                                                {__("Staffs ", "bookify")}
                                                <span style={{color:"#A61616"}}>*</span>
                                            </Typography>
                                            <Select
                                                id="appointment-staffs"
                                                name="appointmentStaff"
                                                required
                                                error={errors.appointmentStaff}
                                                value={addFormData.appointmentStaff}
                                                onChange={this.handleStaffChange}
                                                sx={{
                                                    height: "45px",
                                                    "& fieldset": {
                                                        border: "none",
                                                    },
                                                    "&.MuiOutlinedInput-root": {
                                                        mt: "0px",
                                                        border: "1px solid",
                                                        borderColor: errors.appointmentStaff ? "error.main" : "#BFD4D4",
                                                    },
                                                }}
                                            >
                                                <MenuItem disabled>
                                                    {__("Select Staff", "bookify")}
                                                </MenuItem>
                                                {staffs.map((value) => (
                                                    <MenuItem key={value.staff_id} value={value.staff_id}>
                                                        {value.staff_name}
                                                    </MenuItem>
                                                ))}
                                            </Select>
                                        </FormControl>
                                    </Grid>
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-date">
                                                {__("Date ", "bookify")}
                                                <span style={{color:"#A61616"}}>*</span>
                                            </Typography>
                                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                                <DatePicker
                                                    format={dateFormat}
                                                    disablePast
                                                    name="appointmentDate"
                                                    value={addFormData.appointmentDate}
                                                    onChange={this.handleDateChange}
                                                    shouldDisableDate={this.shouldDisableDate}
                                                    maxDate={maxDate}
                                                    slotProps={{
                                                        textField: {
                                                            id: "appointment-date",
                                                            variant: "outlined",
                                                            required: true,
                                                            error: errors.appointmentDate,
                                                            sx: {
                                                                borderRadius: "5px",
                                                                justifyContent: "center",
                                                                "& fieldset": {
                                                                    border: "none",
                                                                },
                                                                "& .MuiOutlinedInput-root": {
                                                                    mt: "0px",
                                                                    height: "43px",
                                                                    border: "1px solid",
                                                                    borderColor: errors.appointmentDate ? "error.main" : "#BFD4D4",
                                                                },
                                                                "& .MuiInputBase-input": {
                                                                    padding: "0px 14px"
                                                                }
                                                            }
                                                        },
                                                    }}
                                                />
                                            </LocalizationProvider>
                                        </FormControl>
                                    </Grid>
                                    <Grid item>
                                        { ProMultipleBooking && staffMultipleBooking ? (
                                            <FormControl fullWidth>
                                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-duration">
                                                    {__("Duration ", "bookify")}
                                                    <span style={{color:"#A61616"}}>*</span>
                                                </Typography>
                                                <Select
                                                    id="appointment-duration"
                                                    name="appointmentDuration"
                                                    required
                                                    error={errors.appointmentDuration}
                                                    multiple
                                                    value={addFormData.appointmentDuration}
                                                    onChange={this.handleInputChange}
                                                    renderValue={(selected) => (
                                                        <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                                                            {selected.map((value) => (
                                                                <Chip key={value} label={value} />
                                                            ))}
                                                        </Box>
                                                    )}
                                                    sx={{
                                                        minHeight: "45px",
                                                        "& fieldset": {
                                                            border: "none",
                                                        },
                                                        "& .MuiChip-root": {
                                                            height: "23px",
                                                        },
                                                        "& .MuiChip-label": {
                                                            fontSize: "0.799rem",
                                                        },
                                                        "& .MuiOutlinedInput-input": {
                                                            padding: "10px 14px",
                                                        },
                                                        "&.MuiOutlinedInput-root": {
                                                            mt: "0px",
                                                            border: "1px solid",
                                                            borderColor: errors.appointmentDuration ? "error.main" : "#BFD4D4",
                                                        },
                                                    }}
                                                >
                                                    {slots.map((value) => (
                                                        <MenuItem key={value} value={value}>
                                                            {value}
                                                        </MenuItem>
                                                    ))}
                                                </Select>
                                            </FormControl>
                                        ) : (
                                            <FormControl fullWidth>
                                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-duration">
                                                    {__("Duration ", "bookify")}
                                                    <span style={{color:"#A61616"}}>*</span>
                                                </Typography>
                                                <Select
                                                    id="appointment-duration"
                                                    name="appointmentDuration"
                                                    required
                                                    error={errors.appointmentDuration}
                                                    value={addFormData.appointmentDuration.length > 0 ? addFormData.appointmentDuration : ""}
                                                    onChange={this.handleInputChange}
                                                    sx={{
                                                        height: "45px",
                                                        "& fieldset": {
                                                            border: "none",
                                                        },
                                                        "& .MuiChip-root": {
                                                            height: "23px",
                                                        },
                                                        "& .MuiChip-label": {
                                                            fontSize: "0.799rem",
                                                        },
                                                        "&.MuiOutlinedInput-root": {
                                                            mt: "0px",
                                                            border: "1px solid",
                                                            borderColor: errors.appointmentDuration ? "error.main" : "#BFD4D4",
                                                        },
                                                    }}
                                                >
                                                    <MenuItem disabled>
                                                        {__("Select Duration", "bookify")}
                                                    </MenuItem>
                                                    {slots.map((value) => (
                                                        <MenuItem key={value} value={value}>
                                                            {value}
                                                        </MenuItem>
                                                    ))}
                                                </Select>
                                            </FormControl>
                                        )}
                                    </Grid>
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-customers">
                                                {__("Customers ", "bookify")}
                                                <span style={{color:"#A61616"}}>*</span>
                                            </Typography>
                                            <Select
                                                id="appointment-customers"
                                                name="appointmentCustomer"
                                                required
                                                error={errors.appointmentCustomer}
                                                value={addFormData.appointmentCustomer}
                                                onChange={this.handleInputChange}
                                                sx={{
                                                    height: "45px",
                                                    "& fieldset": {
                                                        border: "none",
                                                    },
                                                    "&.MuiOutlinedInput-root": {
                                                        mt: "0px",
                                                        border: "1px solid",
                                                        borderColor: errors.appointmentCustomer ? "error.main" : "#BFD4D4",
                                                    },
                                                }}
                                            >
                                                <MenuItem disabled>
                                                    {__("Select Customer", "bookify")}
                                                </MenuItem>
                                                {customers.map((value) => (
                                                    <MenuItem key={value.id} value={value.id}>
                                                        {value.customer_name}
                                                    </MenuItem>
                                                ))}
                                            </Select>
                                        </FormControl>
                                    </Grid>
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-status">
                                                {__("Status ", "bookify")}
                                                <span style={{color:"#A61616"}}>*</span>
                                            </Typography>
                                            <Select
                                                id="appointment-status"
                                                name="appointmentStatus"
                                                required
                                                error={errors.appointmentStatus}
                                                value={addFormData.appointmentStatus}
                                                onChange={this.handleInputChange}
                                                sx={{
                                                    height: "45px",
                                                    "& fieldset": {
                                                        border: "none",
                                                    },
                                                    "&.MuiOutlinedInput-root": {
                                                        mt: "0px",
                                                        border: "1px solid",
                                                        borderColor: errors.appointmentStatus ? "error.main" : "#BFD4D4",
                                                    },
                                                }}
                                            >
                                                {statuses.map((value) => (
                                                    <MenuItem key={value} value={value}>
                                                        {value}
                                                    </MenuItem>
                                                ))}
                                            </Select>
                                        </FormControl>
                                    </Grid>
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="appointment-note">
                                                {__("Note", "bookify")}
                                            </Typography>
                                            <TextField
                                                id="appointment-note"
                                                name="appointmentNote"
                                                value={addFormData.appointmentNote}
                                                onChange={this.handleInputChange}
                                                multiline
                                                rows={4}
                                                sx={{
                                                    border: "1px solid #BFD4D4",
                                                    borderRadius: "4px",
                                                    "& fieldset": {
                                                        border: "none",
                                                    },
                                                }}
                                            />
                                        </FormControl>
                                    </Grid>
                                </Grid>
                            </Box>
                        </DialogContent>
                        
                        <Divider sx={{borderColor:"#DDEEEE"}} />

                        <DialogActions sx={{m:2}}>
                            <Button variant="wpbkCancelbtn" onClick={this.handleClose}>
                                {__("Cancel", "bookify")}
                            </Button>
                            <LoadingButton variant="wpbkThemeModalBtn" onClick={this.AddAppointmentDetails} loading={loading}>
                                {__("Schedule", "bookify")}
                            </LoadingButton>
                        </DialogActions>
                    </Dialog>
                </ThemeProvider>
                <SnackbarNotice
                    state={this.state}
                    setState={this.setState.bind(this)}
                    open={snackbarOpen}
                    message={snackbarMessage}
                    type={snackbarType}
                />
            </>
        );
    }
}

export default AddAppointment;
