import { Box, Button, Typography } from "@mui/material";
import * as React from "react";
import { useDispatch, useSelector } from "react-redux";
import { buzzOneSendOtpAsync } from "../../redux/authSlice";
import { palette } from "../../theme/palette";

import { unwrapResult } from "@reduxjs/toolkit";
import { TOKEN_NAME } from "../../utils/constants";

useNavigate;

import { toast } from "react-toastify";

const EmailVerification = ({
	onPhaseChange,
	dataSet,
	showFromPublicRoute = true,
}) => {

	const dispatch = useDispatch();
	const [showSendOtp, setShowSendOtp] = React.useState(true);

	const { user } = useSelector(({ auth }) => {
		return {
			user: auth.user,
		};
	});
	console.log({ user });

	const sendEmailOtp = async () => {
		dispatch(
			buzzOneSendOtpAsync({
				email: user.email || dataSet.email,
				token: localStorage.getItem(TOKEN_NAME) || dataSet.token,
			})
		)
			.then(unwrapResult)
			.then((res) => {
				// if (res.status === 200) {
				//   SuccessToast(res.message);
				//   if (!showFromPublicRoute) {
				//     onPhaseChange('mailVerificationLink');
				//   } else {
				//     setShowSendOtp(false);
				//   }
				// } else {
				//   WarningToast(res.message);
				// }
				toast.success(res.message);
				// onPhaseChange('mailVerificationLink');
				if (!showFromPublicRoute) {
					onPhaseChange("mailVerificationLink");
				} else {
					setShowSendOtp(false);
				}
			})
			.catch((res) => {
				toast.error(res.message);
			});
	};

	return showFromPublicRoute ? (
		<Box
			display="flex"
			style={{ width: "100vw", height: "100vh", background: "white" }}
		>
			<Box
				display="flex"
				justifyContent={"center"}
				alignItems={"center"}
				width="50vw"
				height="100vh"
				sx={{
					background:
						"transparent linear-gradient(326deg, #441514 0%, #441514 0%, #7553E8 100%, #441514 100%) 0% 0% no-repeat padding-box",
				}}
			>
				{/* <Carousel>

				</Carousel> */}
			</Box>
		</Box>
	) : (
		<>
			<Typography variant="h4">Email-id isn’t verified</Typography>
			<Box my={2} />
			<Typography style={{ fontSize: "12px", color: palette.palette.buzzFade }}>
				The email associated with your BuzzApp account needs to be confirmed. We can
				send{" "}
				<span style={{ color: palette.palette.primary.main }}>
					{dataSet && dataSet.email}
				</span>{" "}
				a quick verification link.
			</Typography>

			<Box my={3} />
			<Button variant="contained" color="primary" fullWidth onClick={sendEmailOtp}>
				Send verification email
			</Button>
			<Box my={2} />
			<Button
				variant="outlined"
				color="primary"
				fullWidth
				onClick={skipAndProceed}
			>
				Skip for now
			</Button>
		</>
	);
};

export default EmailVerification;
