import {
  Button,
  Form,
  Input,
  message,
  Modal,
  notification,
  Radio,
  Select,
  Space,
  Spin,
} from "antd";
import { FC, useEffect, useState } from "react";
import styles from "./newModalSignIn.module.scss";
import cx from "classnames";
import OtpInput from "react-otp-input";
import SignUpModal from "../latestSignUpModal/SignUpModal";
import * as LoginAPI from "../../../pages/api/login";
import Router, { useRouter } from "next/router";
const { Option } = Select;
import { MailOutlined } from "@ant-design/icons";
import SingInModal from "../singInModel/SingInModal";
import * as UserAPI from "../../../pages/api/createUser";
import SuccessModal from "../successModal/SuccessModal";
import { baseUrl } from "../../../constants/urls";
import { googleClientId } from "../../../constants/socialLogin";
import * as commonAPI from "../../../pages/api/common";
import { GoogleLogin, GoogleLogout } from "react-google-login";
import { useMediaQuery } from "react-responsive";

const md5 = require("md5");
const NewModalSignIn: FC<any> = (props) => {
  const { isMobileOTPModalVisible, handleMobileClose } = props;
  const [form] = Form.useForm();
  const [emailOtp, setEmailOtp] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIiLoading] =useState(false);
  const router = useRouter();
  const loginWithPassword = () => {
    const params = {
      email: emailOtp,
      password: password,
    };

    LoginAPI.loginFetch(params).then((res) => {
      if (res?.status) {
        notification.error({ message: res?.data?.error });
      } else {
        localStorage.setItem("loginDetails", JSON.stringify(res));
        router.reload();
      }
    });
  };

  return (
    <>
      <Modal
        key={"/loginModal"}
        width={"90%"}
        maskClosable={false}
        visible={isMobileOTPModalVisible}
        onOk={handleMobileClose}
        onCancel={handleMobileClose}
        footer={null}
        destroyOnClose={true}
      >
          <h2 className={styles.headerTitle}>Log in with email</h2>
          <Spin size="large" spinning={isLoading}>
        <Form
          onFinish={loginWithPassword}
          name="email_login"
          initialValues={{ remember: true }}
          autoComplete="on"
          form={form}
        >
          <Form.Item
            name="login_email"
            rules={[
              {
                required: true,
                message: "Please Enter your Email Address!",
              },
            ]}
          >
            <Input
              style={{ height: "45px" }}
              placeholder="Please Enter Your Mail Id"
              value={emailOtp}
              onChange={(e) => {
                setEmailOtp(e.target.value);
              }}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "Please Enter Your Password!",
              },
            ]}
          >
            <Input.Password
              type="password"
              placeholder="Password"
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              className={styles.userName}
            />
          </Form.Item>
          <Form.Item>
            <Button
              block
              htmlType="submit"
              type="primary"
              style={{ height: "45px" }}
            >
              Continue
            </Button>
          </Form.Item>
        </Form>
        </Spin>
      </Modal>
    </>
  );
};
export default NewModalSignIn;