import { Checkbox, FormControlLabel, FormGroup } from "@mui/material";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { CustomStackFullWidth } from "../../../styled-components/CustomStyles.style";

import { useTheme } from "@emotion/react";
import LoadingButton from "@mui/lab/LoadingButton";
import Link from "next/link";
import { useRouter } from "next/router";
import { useDispatch, useSelector } from "react-redux";
import { setOfflineInfoStep } from "../../../redux/slices/offlinePaymentData";
import { CustomTypography } from "../../landing-page/hero-section/HeroSection.style";
import { getInfoFromZoneData } from "utils/CustomFunctions";
import { toast } from "react-hot-toast";
import { cod_exceeds_message } from "utils/toasterMessages";

const PlaceOrder = (props) => {
	const {
		placeOrder,
		orderLoading,
		zoneData,
		isStoreOpenOrNot,
		storeData,
		isSchedules,
		page,
		storeCloseToast,
		isLoading,
		totalAmount
	} = props;

	const [disabled, setDisabled] = useState(true);

	const { offlineInfoStep } = useSelector((state) => state.offlinePayment);
	const { t } = useTranslation();
	const theme = useTheme();
	const router = useRouter();
	const dispatch = useDispatch();
	const [checked, setChecked] = useState(false);
	const handleChange = (e) => {
		setChecked(e.target.checked);
	};
	const handleOffline = (e) => {
		if (storeData?.active) {
			const codLimit = getInfoFromZoneData(zoneData)?.pivot?.maximum_cod_order_amount;
			if (totalAmount <= codLimit) {
				if (isSchedules()) {
					setChecked(e.target.checked);
					dispatch(setOfflineInfoStep(2));
					router.push(
						{
							pathname: "/checkout",
							query: { page: page, method: "offline" },
						},
						undefined,
						{ shallow: true }
					);
				} else {
					storeCloseToast();
				}
			} else {
				toast.error(t(cod_exceeds_message), {
					duration: 5000,
				});
			}

			//checking restaurant or shop open or not

		} else {
			storeCloseToast();
		}
	};

	const primaryColor = theme.palette.primary.main;
	return (
		<CustomStackFullWidth alignItems="center" spacing={2} mt=".5rem">
			<FormGroup>
				<FormControlLabel
					control={
						<Checkbox checked={checked} onChange={handleChange} />
					}
					label={
						<CustomTypography fontSize="12px">
							{t(
								`I agree that placing the order places me under`
							)}{" "}
							<Link
								href="/terms-and-conditions"
								style={{ color: primaryColor }}
							>
								{t("Terms and Conditions")}
							</Link>{" "}
							{t("&")}
							<Link
								href="/privacy-policy"
								style={{ color: primaryColor }}
							>
								{" "}
								{t("Privacy Policy")}
							</Link>
						</CustomTypography>
					}
				/>
			</FormGroup>
			<LoadingButton
				type="submit"
				fullWidth
				variant="contained"
				onClick={placeOrder}
				loading={orderLoading || isLoading}
				disabled={!checked}
			>
				{t("Place Order")}
			</LoadingButton>
		</CustomStackFullWidth>
	);
};

PlaceOrder.propTypes = {};

export default PlaceOrder;
