import {
	Box,
	Button,
	IconButton,
	Typography,
	makeStyles,
} from "@material-ui/core";
import { unwrapResult } from "@reduxjs/toolkit";
import OTPInput from "otp-input-react";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import validator from "validator";
import SvgPencil from "../../../assets/SvgPencil";
import BuzzInput from "../../../components/BuzzInput/BuzzInput";
import BuzzModal from "../../../components/BuzzModal/BuzzModal";
import useToast from "../../../hooks/useToast";
import { palette } from "../../../Theme/palette";
import {
	buzzOneOtpAsync,
	buzzOneUpdatePhoneAsync,
	buzzOneVerifyOtpAsync,
} from "../OnboardingStore/onboardingSlice";

const useStyles = makeStyles((theme) => ({
	greyText: {
		color: theme.palette.buzzGreyColor,
	},
	smallText: {
		...theme.typography.body2,
	},
	verticalSpace: {
		margin: "50px 0",
	},
	button: {
		backgroundColor: theme.palette.primary.main,
		color: theme.palette.buzzContainerColor,
		// height: 40,
	},
	otpInputs: {
		"& input": {
			background: theme.palette.buzzGreyBlue,
			border: "none",
			height: "55px !important",
			width: "40px !important",
		},
	},
}));

const VerifyOtp = () => {
	const { signUpData, availability } = useSelector(({ onboardingReducer }) => {
		return {
			signUpData: onboardingReducer.signUpData,
			availability: onboardingReducer.availability,
			otpStatus: onboardingReducer.otpStatus,
		};
	});

	const dispatch = useDispatch();
	const { SuccessToast, WarningToast, ErrorToast } = useToast();

	const [OTP, setOTP] = React.useState("");
	const [phoneNumber, setPhoneNumber] = React.useState("");
	const [changeNumberModalOpen, setChangeNumberModalOpen] =
		React.useState(false);

	const classes = useStyles();

	React.useEffect(() => {
		if (signUpData && signUpData.data && signUpData.data.mobile) {
			dispatch(buzzOneOtpAsync({ phone: signUpData.data.mobile }));
		}
	}, [signUpData]);

	const submitOtp = () => {
		dispatch(buzzOneVerifyOtpAsync({ otp: OTP }))
			.then(unwrapResult)
			.then((res) => {
				SuccessToast(res.message);
			})
			.catch((res) => {
				ErrorToast(res.message);
			});
	};

	const sendOtpToNewNumber = () => {
		dispatch(buzzOneUpdatePhoneAsync({ contact: phoneNumber }))
			.then(unwrapResult)
			.then((updateRes) => {
				SuccessToast(updateRes.message);
			})
			.catch((updateRes) => {
				ErrorToast(updateRes.message);
			});
		// console.log(updateRes);
		// if (updateRes.status === 200) {
		//   SuccessToast('New number was updated in your profile.');
		//   dispatch(buzzOneOtpAsync())
		//     .then(unwrapResult)
		//     .then((res) => {
		//       if (res.status === 200) {
		//         SuccessToast('OTP was sent to your newly provided number.');
		//         setChangeNumberModalOpen(false);
		//         setPhoneNumber('');
		//       } else {
		//         WarningToast(res.message);
		//       }
		//     });
		// } else {
		//   WarningToast(updateRes.message);
		// }

		// });
	};

	return (
		<Box
			display="flex"
			style={{ width: "100vw", height: "100vh", background: "white" }}
		>
			<BuzzModal
				title="Change your phone number"
				open={changeNumberModalOpen}
				onClose={() => setChangeNumberModalOpen(false)}
			>
				<BuzzInput
					nationalCode
					type="number"
					maxLength={10}
					onChange={(e) => {
						setPhoneNumber(e.target.value);
					}}
					value={phoneNumber}
					validation={validator.isMobilePhone(phoneNumber)}
					label={"Contact Number"}
					helperText={
						availability &&
						availability.contact && (
							<Typography
								style={{
									color: palette.palette.primary.main,
									fontSize: "0.8rem",
								}}
							>
								{`Either we already know the phone number or it is'nt a valid one`}
							</Typography>
						)
					}
				/>
				<Box my={3} />
				<Button
					variant="contained"
					color="primary"
					fullWidth
					onClick={sendOtpToNewNumber}
				>
					Send otp
				</Button>
			</BuzzModal>
			<Box width={"50vw"} height={"100vh"}>
				<Box px={12} mt={5}>
					<Typography variant="h3" className={classes.greyText}>
						Verify
					</Typography>
					<Typography
						style={{ width: 400 }}
						fontSize="medium"
						className={classes.greyText}
					>
						Before we create your account, you must verify your contact number
					</Typography>
					<Box
						width={420}
						height={400}
						display="flex"
						flexDirection="column"
						justifyContent="space-between"
						className={classes.verticalSpace}
					>
						<Typography fontSize="medium" className={classes.greyText}>
							<Box display="flex">
								OTP sent to
								<Box mx={1} />
								<b>{signUpData && signUpData.data && signUpData.data.mobile}</b>
								<Box mx={1} />
								<IconButton
									style={{
										border: "2px solid",
										borderRadius: 4,
										borderColor: palette.palette.primary.main,
										display: "flex",
										justifyContent: "center",
										alignItems: "center",
										padding: 2,
									}}
									onClick={() => setChangeNumberModalOpen(true)}
								>
									<SvgPencil
										width={16}
										height={16}
										fill={palette.palette.primary.main}
									/>
								</IconButton>
							</Box>
						</Typography>

						<>
							<OTPInput
								value={OTP}
								onChange={setOTP}
								autoFocus
								OTPLength={6}
								otpType="number"
								disabled={false}
								// secure
								className={classes.otpInputs}
							/>
						</>

						<Box className={classes.verticalSpace}>
							<Button
								style={{
									width: 420,
									height: 50,
									backgroundColor: palette.palette.primary.main,
									color: palette.palette.buzzContainerColor,
									fontSize: 10,
								}}
								color="primary"
								onClick={submitOtp}
							>
								Submit
							</Button>
							<br />
							<br />
							<Button
								style={{
									width: 420,
									height: 50,
									backgroundColor: "transparent",
									border: `1px solid ${palette.palette.primary.main}`,
									color: palette.palette.primary.main,
									fontSize: 10,
								}}
								color="secondary"
								// onClick={() => history.goBack()}
							>
								Go back
							</Button>
						</Box>
					</Box>
				</Box>
			</Box>
			<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>
	);
};

export default VerifyOtp;
