import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { DayCalendarSkeleton } from "@mui/x-date-pickers/DayCalendarSkeleton";
import { Button } from "@mui/base/Button";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import updateLocale from "dayjs/plugin/updateLocale";
import { 
	Box, Typography, Paper, Grid, FormControl,
	Select, MenuItem, LinearProgress, Skeleton
 } from "@mui/material";
 import Alert from "@mui/material/Alert";
import { withBooking } from "../../FormContext";
import LanguageIcon from "@mui/icons-material/Language";
import LoadingButton from "@mui/lab/LoadingButton";

class DateAndTimeTab extends Component {

	pickFirst = (val) => Array.isArray(val) ? val[0] : val;

	state= {
		divRef: React.createRef(),
		alertRef: React.createRef(),
		staffId: null,
        staffName: "",
        servicePrice: 0,
        staffsByServices: [],
        StaffByServiceStopRerendering: false,
        daysOpen: [],
        specialDate: [],
        holidays: [],
        DatesByStaffStopRerendering: false,
        DateLoading: true,
		slotsLoading: false,
        slots: [],
        slot: [],
        date: null,
		calendarDate: null,
		multipleBooking: false,
		timeFormat: "hh:mm A",
		allTimezones: [],
		UserTimezone: "",
		loading: false,
	};

    componentDidMount() {

		dayjs.extend(utc);
		dayjs.extend(timezone);

		const UserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
		const allTimezones = Intl.supportedValuesOf("timeZone");

		this.setState({
			UserTimezone: UserTimezone,
			allTimezones: allTimezones,
		});

		const StaffTab = window.StaffTab;

		if ( StaffTab ) {
			this.getDatesByStaff();
		} else {
			this.getStaffByService();
		}
    }

	componentDidUpdate(prevProps, prevState) {
		const { divRef, alertRef, slot, slots, slotsLoading, date } = this.state;

		const slotsChanged = prevState.slots !== slots;
		const finishedLoading = prevState.slotsLoading && !slotsLoading;
		const hasDate = Boolean(date);

		if ((slotsChanged && slots.length > 0) || (finishedLoading && hasDate)) {
			setTimeout(() => {
				if (divRef.current) {
					divRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
				}
			}, 100);
		}

		if (prevState.slots !== slot && slot.length > 1) {
			setTimeout(() => {
				if (alertRef.current) {
					alertRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
				}
			}, 100);
		}
	}

    getStaffByService() {

		const { state } = this.props;
		const { StaffByServiceStopRerendering } = this.state;
		let serviceId = state.serviceId;

		if ( ! StaffByServiceStopRerendering ) {

			let staff = {};

			const dataToSend = {};

			if ( serviceId === null && wpbApp.HideServices == "true" ) {
				serviceId = wpbApp.Services;
			}
			dataToSend.service_id = serviceId;
		
			fetch(`${wpbApp.root}bookify/v1/staffs-by-service`, {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
					"X-WP-Nonce": wpbApp.nonce
				},
				body: JSON.stringify(dataToSend),
			})
			.then(response => response.json())
			.then(data => {
				staff = data.staffs[0];
				if ( staff ) {
					this.setState({
						staffId: staff["staff_id"],
						staffName: staff["staff_name"],
						servicePrice: staff["service_price"],
						serviceName: staff["service_name"],
						StaffByServiceStopRerendering: true,
					});
					this.getDatesByStaff( staff["staff_id"] );
				} else {
					this.setState({
						StaffByServiceStopRerendering: true,
						DateLoading: false,
					});
				}
			})
			.catch((error) => {
				console.error("Error fetching data:", error);
			})
		}
    }

	getDatesByStaff( paramStaffId = false ) {

		const { state } = this.props;

		const { DatesByStaffStopRerendering } = this.state;
		let staffId = paramStaffId ? paramStaffId : state.staffId;
		let serviceId = state.serviceId;

		if ( ! DatesByStaffStopRerendering ) {

			const dataToSend = {};
			if ( staffId === null && wpbApp.HideStaffs == "true" ) {
				staffId = wpbApp.Staffs[0];
			}

			if ( serviceId === null && wpbApp.HideServices == "true" ) {
				serviceId = this.pickFirst(wpbApp.Services);
			}

			dataToSend.service_id = serviceId;
			dataToSend.staff_id = staffId;

			fetch(`${wpbApp.root}bookify/v1/dates-by-staff`, {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
					"X-WP-Nonce": wpbApp.nonce
				},
				body: JSON.stringify(dataToSend),
			})
			.then(response => response.json())
			.then(data => {
				this.setState({
					daysOpen: data.dates,
					specialDate: data.special,
					holidays: data.holidays,
					DatesByStaffStopRerendering: true,
					StaffByServiceStopRerendering: true,
					DateLoading: false,
				});

				if( wpbApp.HideStaffs == "true" ) {
					this.setState({
						servicePrice: data.servicePrice,
						serviceName: data.serviceName,
					});
				}

				if( state.date != null ) {
					this.handleDateChange( state.date );
				}
			})
			.catch((error) => {
				console.error("Error fetching data:", 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;
    }

	goToPreviousStep = () => {
		const StaffTab = window.StaffTab;
		const LocationTab = window.LocationTab;
		const HideServices = wpbApp.HideServices;
		const HideLocations = wpbApp.HideLocations;
		const HideStaffs = wpbApp.HideStaffs;
		
		const visibleTabs = [
			...(LocationTab && HideLocations === "false" && wpbApp.locationsCount > 0 ? ["location"] : []),
			...(HideServices === "false" ? ["service"] : []),
			...(StaffTab && HideStaffs === "false" ? ["staff"] : []),
			"datetime",
			"userinfo",
			"payments",
			"confirmation"
		];

		const currentIndex = visibleTabs.indexOf("datetime");
		const prevIndex = currentIndex - 1;

		this.props.setTab(prevIndex);
	};

	goToNextStep = () => {
		this.setState({ loading: true });

		const StaffTab = window.StaffTab;
		const HideServices = wpbApp.HideServices;
		const HideLocations = wpbApp.HideLocations;
		const HideStaffs = wpbApp.HideStaffs;
		const LocationTab = window.LocationTab;
		const { state, updateInput } = this.props;
		const { staffId, staffName, servicePrice, serviceName, date, slot, daysOpen, specialDate, holidays, slots, timeFormat, UserTimezone } = this.state;

		if (date != null && slot.length > 0) {		
			const convertSlotToWpTimezone = (slot) => {
				const [startTime, endTime] = slot.split(" - ");

				const formatedStartTime = dayjs(`1970-01-01 ${startTime}`).format("HH:mm");
				const formatedEndTime = dayjs(`1970-01-01 ${endTime}`).format("HH:mm");

				const convertedStartTime = dayjs.tz(`1970-01-01 ${formatedStartTime}`, UserTimezone).tz(wpbApp.wpTimezone).format(timeFormat);
				const convertedEndTime = dayjs.tz(`1970-01-01 ${formatedEndTime}`, UserTimezone).tz(wpbApp.wpTimezone).format(timeFormat);
				return `${convertedStartTime} - ${convertedEndTime}`;
			};

			const slotInAdminTimezone = slot.map( eachSlot => convertSlotToWpTimezone( eachSlot ) );

			const slotCount = slot.length;
			const totalPrice = ( HideStaffs == "true" ? servicePrice : state.servicePrice ) * slotCount;

			if ( ! StaffTab ) {
				updateInput( "staffId", staffId );
				updateInput( "staffName", staffName );
				updateInput( "total", servicePrice );
			} else {
				updateInput( "total", totalPrice );
			}
			
			if( HideServices === "true" ) {
				updateInput("serviceId", wpbApp.Services[0]);
				updateInput("serviceName", serviceName);
			}
			updateInput( "date", date );
			updateInput( "slot", slotInAdminTimezone );
			updateInput( "timezone", UserTimezone );
			updateInput( "daysOpen", daysOpen );
			updateInput( "specialDate", specialDate );
			updateInput( "holidays", holidays );
			updateInput( "slots", slots );

			const visibleTabs = [
				...(LocationTab && HideLocations === "false" && wpbApp.locationsCount > 0 ? ["location"] : []),
				...(HideServices === "false" ? ["service"] : []),
				...(StaffTab && HideStaffs === "false" ? ["staff"] : []),
				"datetime",
				"userinfo",
				"payments",
				"confirmation"
			];
			
			const currentIndex = visibleTabs.indexOf("datetime");
			const nextIndex = currentIndex + 1;
			
			this.props.setTab(nextIndex);
		}

		this.setState({ loading: false });
	};

	handleDateChange = (date, selectionState) => {
		const pickerDate = dayjs(date);

		this.setState({
			calendarDate: pickerDate,
		});

		if (selectionState && selectionState !== "finish") {
			return;
		}

		const { state } = this.props;

        const weekDay = pickerDate.day();
        const selectedDate = pickerDate.format("YYYY-MM-DD");
		const { daysOpen, specialDate, staffId, UserTimezone } = this.state;

		this.setState({ 
			date: selectedDate,
			slot: [],
			slotsLoading: true,
		});

		let staffsID = staffId ? staffId : state.staffId;
		const ProStaffMultipleBooking = window.ProStaffMultipleBooking;

        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;
                }
            }
        }

		if ( staffsID === null && wpbApp.HideStaffs == "true" ) {
			staffsID = wpbApp.Staffs[0];
		}

        const dataToSend = {};
        dataToSend.date = selectedDate;
        dataToSend.slots = JSON.stringify(timeSlots);
        dataToSend.staff_id = staffsID;

		fetch(`${wpbApp.root}bookify/v1/available-slots`, {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
				"X-WP-Nonce": wpbApp.nonce
			},
			body: JSON.stringify(dataToSend),
		})
		.then(response => response.json())
		.then(data => {
			const timeFormated = data.timeFormat === "12-hour" ? "hh:mm A" : "HH:mm";

			const convertSlotToTimezone = (slot) => {
				const [start, end] = slot.split(" - ");

				const formatedStartTime = dayjs(`1970-01-01 ${start}`).format("HH:mm");
				const formatedEndTime = dayjs(`1970-01-01 ${end}`).format("HH:mm");

				const startTime = dayjs.tz(`1970-01-01 ${formatedStartTime}`, wpbApp.wpTimezone).tz(UserTimezone).format(timeFormated);
				const endTime = dayjs.tz(`1970-01-01 ${formatedEndTime}`, wpbApp.wpTimezone).tz(UserTimezone).format(timeFormated);

				return `${startTime} - ${endTime}`;
			};

			const availableSlots = data.available_slots.map(slot => convertSlotToTimezone(slot));

			this.setState({ 
				slots: availableSlots,
				slotsLoading: false,
				timeFormat: timeFormated,
			});
			
			if ( ProStaffMultipleBooking && data.multipleBooking ) {
				this.setState({ 
					multipleBooking: JSON.parse(data.multipleBooking),
				});
			}
		})
		.catch(error => {
			console.error("Error:", error);
			this.setState({
				slotsLoading: false,
			});
		});
    };

	handleSlotClick = (event) => {
		const { staffId, staffName, servicePrice, serviceName, date, daysOpen, specialDate, holidays, slots, timeFormat, UserTimezone, multipleBooking } = this.state;
		const { state, updateInput } = this.props;
		const StaffTab = window.StaffTab;
		const HideServices = wpbApp.HideServices;
		const HideLocations = wpbApp.HideLocations;
		const HideStaffs = wpbApp.HideStaffs;
		const LocationTab = window.LocationTab;
		const clickedSlot = event.currentTarget.getAttribute("data-slot");
		const ProStaffMultipleBooking = window.ProStaffMultipleBooking;
		let slot;

		if (ProStaffMultipleBooking && multipleBooking) {
			slot = this.state.slot.includes(clickedSlot)
				? this.state.slot.filter(s => s !== clickedSlot)
				: [...this.state.slot, clickedSlot];
		} else {
			slot = [clickedSlot];
		}

		this.setState({ slot: slot });

		if (date != null && slot.length > 0 && ! multipleBooking) {		
			const convertSlotToWpTimezone = (slot) => {
				const [startTime, endTime] = slot.split(" - ");

				const formatedStartTime = dayjs(`1970-01-01 ${startTime}`).format("HH:mm");
				const formatedEndTime = dayjs(`1970-01-01 ${endTime}`).format("HH:mm");

				const convertedStartTime = dayjs.tz(`1970-01-01 ${formatedStartTime}`, UserTimezone).tz(wpbApp.wpTimezone).format(timeFormat);
				const convertedEndTime = dayjs.tz(`1970-01-01 ${formatedEndTime}`, UserTimezone).tz(wpbApp.wpTimezone).format(timeFormat);
				return `${convertedStartTime} - ${convertedEndTime}`;
			};

			const slotInAdminTimezone = slot.map( eachSlot => convertSlotToWpTimezone( eachSlot ) );

			const slotCount = slot.length;
			const totalPrice = ( HideStaffs == "true" ? servicePrice : state.servicePrice ) * slotCount;

			const visibleTabs = [
				...(LocationTab && HideLocations === "false" && wpbApp.locationsCount > 0 ? ["location"] : []),
				...(HideServices === "false" ? ["service"] : []),
				...(StaffTab && HideStaffs === "false" ? ["staff"] : []),
				"datetime",
				"userinfo",
				"payments",
				"confirmation"
			];
			
			const currentIndex = visibleTabs.indexOf("datetime");
			const nextIndex = currentIndex + 1;
			
			this.props.setTab(nextIndex);

			if ( ! StaffTab ) {
				updateInput( "staffId", staffId );
				updateInput( "staffName", staffName );
				updateInput( "total", servicePrice );
			} else {
				updateInput( "total", totalPrice );
			}
			
			if( HideServices === "true" ) {
				updateInput("serviceId", wpbApp.Services[0]);
				updateInput("serviceName", serviceName);
			}
			updateInput( "date", date );
			updateInput( "slot", slotInAdminTimezone );
			updateInput( "timezone", UserTimezone );
			updateInput( "daysOpen", daysOpen );
			updateInput( "specialDate", specialDate );
			updateInput( "holidays", holidays );
			updateInput( "slots", slots );
		}
	};

	handleTimezoneChange = (event) => {
		const { value } = event.target;
		this.setState({
			UserTimezone: value,
			date: null,
			calendarDate: null,
			slots: [],
			slot: [],
		});
	}

	renderSlots = ( slots ) => {

		const { slot, alertRef, slotsLoading, date } = this.state;
		const { data } = this.props;
        
		return (
			<>
				<Typography variant="h6" gutterBottom sx={{color:"#042626", fontSize:"16px", padding:"20px 20px 10px 20px", textTransform:"none", mb:"0px"}}>{__(`Available slot(s) for ${dayjs(date).format("MMMM D, YYYY")}`, "bookify")}</Typography>
				<Paper elevation={0} sx={{padding:"0px 20px 10px 20px", borderRadius:"8px"}}>
					<Grid container spacing={1}>
						<Grid item sx={{display:"flex", gap:"10px", flexWrap:"wrap", flexDirection:"row"}}>
							{slotsLoading ? (
								Array.from(new Array(11)).map((_, idx) => (
									<Skeleton key={idx} variant="rounded" width={158} height={34} animation="wave" />
								))
							) : slots.length === 0 && date != null ? (
								<Typography
									sx={{
										fontSize:"0.85rem",
										color:"#587373",
										"@keyframes emptyBounce": {
											"0%": { opacity: 0, transform: "scale(0.9) translateY(6px)" },
											"60%": { opacity: 1, transform: "scale(1.04) translateY(-3px)" },
											"100%": { opacity: 1, transform: "scale(1) translateY(0)" },
										},
										animation: "emptyBounce 420ms ease-out",
										animationFillMode: "both",
									}}
								>
									{__("No slots available for the selected date, please select another date to see available slots.", "bookify")}
								</Typography>
							) : (
								slots.map((eachSlot, idx) => (
									<Box
										key={eachSlot}
										sx={{
											backgroundColor: "#F4FDFD",
											color: "#036666",
											width: "fit-content",
											borderRadius: "4px",
											padding: "7px 20px",
											cursor: "pointer",
											borderWidth: "1px",
											borderStyle: "solid",
											borderColor: slot.includes(eachSlot) ? "#036666" : "#A4D4D3",
											"@keyframes slotBounce": {
												"0%": { opacity: 0, transform: "scale(0.9) translateY(6px)" },
												"60%": { opacity: 1, transform: "scale(1.04) translateY(-4px)" },
												"100%": { opacity: 1, transform: "scale(1) translateY(0)" },
											},
											animation: "slotBounce 420ms ease-out",
											animationDelay: `${idx * 60}ms`,
											animationFillMode: "both",
										}}
										data-slot={eachSlot}
										onClick={this.handleSlotClick}
									>
										<Typography sx={{fontSize:"12px", fontWeight:"600" }}>{eachSlot}</Typography>
									</Box>	
								))
							)}
						</Grid>
					</Grid>
				</Paper>
				
				
				{slot.length > 1 && data.zoomToggle && (
					<div ref={alertRef}>
						<Alert severity="info" 
							sx={{ 
								marginBottom: "15px", 
								width: "33em",
								"& .Muiinfo-message": {
									overflow: "hidden",
									textOverflow: "ellipsis",
									textWrap: "nowrap",
								}
							}}
						>
							{__( "Zoom Meeting is unavailable for this service due to multiple bookings.", "bookify")}
						</Alert>
					</div>
				)}
			</>
		)
    };

    render() {
		const { data } = this.props;
		const { divRef, slots, DateLoading, date, calendarDate, UserTimezone, allTimezones, loading } = this.state;

		dayjs.extend(updateLocale);

		const weekDays = { "Sunday": 0, "Monday": 1, "Tuesday": 2, "Wednesday": 3, "Thursday": 4, "Friday": 5, "Saturday": 6 };

		dayjs.updateLocale("en", {
			weekStart: weekDays[data.weekStartsOn]
		});

		let maxDate = dayjs().add(50, "year");
        if ( data.toggleLimitedBooking == "Enable" ) {
            maxDate = dayjs().add(parseInt(data.limitedBookingMonths), "month");
        }

		const ProSlotTimezone = window.ProSlotTimezone;
		const LocationTab = window.LocationTab;
		const StaffTab = window.StaffTab;
		const HideLocations = wpbApp.HideLocations;
		const HideServices = wpbApp.HideServices;
		const HideStaffs = wpbApp.HideStaffs;
		const isDisabled = ProSlotTimezone ? !JSON.parse(data.slotsTimezone || "false") : true;

		return (
			<div className="bookify-tab-panel-wrapper">
				<div className="bookify-tab-panel-header">{__("Select Date & Time", "bookify")}</div>
				<div className="bookify-tab-panel-inner-wrapper">
					<div className="bookify-tab-panel-body">
						<Box className="bookify-tab-panel-data" sx={{position:"relative"}}>								
							<Box sx={{display:"flex", justifyContent:"flex-end", alignItems:"center", float: "inline-end"}}>
								{isDisabled ? (
									<Typography sx={{display:"flex", alignItems:"center", paddingRight:"24px", paddingTop:"10px", color:"#9E9EC0", gap:"5px"}}>
										<LanguageIcon sx={{color:"#9E9EC0", width:"19px", height:"19px"}} />
										{__(UserTimezone, "bookify")}
									</Typography>
								) : (
									<FormControl sx={{mb:1}} size="small">
										<Box sx={{display:"flex", alignItems:"center"}}>
											<LanguageIcon sx={{color:"#042626", width:"19px", height:"19px"}} />
											<Select
												id="bookify-timezone"
												label="Timezone"
												value={UserTimezone}
												name="UserTimezone"
												onChange={this.handleTimezoneChange}
												sx={{
													flex: 1,
													width: "170px",
													"& .MuiInputBase-input": {
														zIndex: 1,
													},
													"& svg": {
														zIndex: 1,
													},
													"& .MuiOutlinedInput-input": {
														padding: "8px 5px",
													}
												}}
											>
												<MenuItem value="" disabled sx={{fontStyle:"italic", color:"#9E9EC0" }}>
													{__("Select Timezone", "bookify")}
												</MenuItem>
												{allTimezones.map((timezone, index) => (
													<MenuItem key={index} value={timezone} 
														sx={{
															marginLeft: "3px",
															marginRight: "3px",
															paddingLeft: "10px",
															paddingRight: "10px",
															borderRadius: "8px"
														}}
													>
														{timezone}
													</MenuItem>
												))}
											</Select>
										</Box>
									</FormControl>
								)}
							</Box>
							
							<Paper elevation={0} sx={{padding:"0", borderRadius:"8px", position:"relative"}}>
								<LocalizationProvider dateAdapter={AdapterDayjs}>
									<DateCalendar 
										loading={DateLoading}
										renderLoading={() => <DayCalendarSkeleton />}
										disablePast={true}
										maxDate={maxDate}
										shouldDisableDate={this.shouldDisableDate}
										onChange={this.handleDateChange}
										views={["year", "month", "day"]}
										value={calendarDate || (date ? dayjs(date) : null)}
										dayOfWeekFormatter={(weekday) => `${weekday.format("ddd").toUpperCase()}`}
										sx={{
											".MuiDayCalendar-loadingContainer": {
												display:"block"
											},
											".MuiDayCalendarSkeleton-week": {
												justifyContent: "space-between",
											},
											"& .MuiPickersDay-root": {
												transition: "transform 100ms ease, box-shadow 100ms ease",
											},
											"& .MuiPickersDay-root.Mui-selected": {
												animation: "dayBounce 200ms ease-out",
											},
											"& .MuiPickersDay-root:active": {
												transform: "scale(0.95)",
											},
											"@keyframes dayBounce": {
												"0%": { transform: "scale(0.9)", boxShadow: "0 4px 10px rgba(0,0,0,0.08)" },
												"55%": { transform: "scale(1.06)", boxShadow: "0 6px 14px rgba(0,0,0,0.12)" },
												"100%": { transform: "scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)" },
											},
										}}
									/>
								</LocalizationProvider>
							</Paper>
							<div ref={divRef} tabIndex="0" className="wpbfOutlineNone">
								{date != null ? this.renderSlots( slots ) : ""}
							</div>
						</Box>
					</div>
				</div>
				<div className="bookify-tab-panel-footer">
					{ LocationTab && StaffTab ? (
						HideLocations == "false" || HideServices == "false" || HideStaffs == "false" ? (
							<Button variant="contained" onClick={this.goToPreviousStep}  className="bookify-btn-secondary">
								{__("Back", "bookify")}
							</Button>
						) : (
							<div></div>
						)
					) : (
						 HideServices == "false" ? (
							<Button variant="contained" onClick={this.goToPreviousStep}  className="bookify-btn-secondary">
								{__("Back", "bookify")}
							</Button>
						) : (
							<div></div>
						)
					)}
					<LoadingButton loading={loading} loadingIndicator={<LinearProgress color="success" sx={{width:"100%", height:"34px", borderRadius:"4px", opacity:"0.2"}} />} onClick={this.goToNextStep}  className="bookify-btn-primary" sx={{".MuiLoadingButton-loadingIndicator":{width:"100%"}}}>
						{__("Next", "bookify")}
					</LoadingButton>
				</div>
			</div>
		);
    }
}

export default withBooking([
	"serviceId",
	"staffId",
	"servicePrice",
	"serviceName",
])(DateAndTimeTab);