import React, { useState } from "react";
import { Formik } from "formik";
import Image from "next/image";
import Link from "next/link";
import { Fragment } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { renderImage } from "../../services/imageHandling";
import { useRouter } from "next/router";
import { signIn } from "next-auth/react";
import { toast } from "react-toastify";
import { Loader } from "react-bootstrap-typeahead";

const Login = props => {
  const [loading, setLoading] = useState(false);
  const loginValidationSchema = Yup.object().shape({
    email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
    password: Yup.string().required("Password is Required").min(6, "Password must be minimum 6 characters")
  });
  const router = useRouter();
  return (
    <Fragment>
      <div className="contaier-fluid login-banner-image">
        <div className="row">
          <div className="col-11 col-lg-4 login-div">
            <div className="">
              <h2>{props.type == "user" ? "Login to Experience" : (props.type == "vendor" ? "Vendor Login" : "Admin Login")}</h2>
              <div className="form-container">
                <Formik
                  initialValues={{
                    email: "",
                    password: ""
                  }}
                  validationSchema={loginValidationSchema}
                  // enableReinitialize={true}
                  onSubmit={async values => {
                    setLoading(true);
                    console.log("login values", values);
                    const signInResponse = await signIn("credentials", {
                      email: values.email,
                      password: values.password,
                      redirect: false
                    });
                    console.log("signInResponse", signInResponse);
                    if (!signInResponse.ok) {
                      toast.error(signInResponse.error);
                      setLoading(false);
                      return;
                    }
                    if (signInResponse.ok) {
                      setLoading(false);
                      router.push("/vendor/business-details");
                    }
                    // router.push("")
                  }}
                >
                  {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
                    <Form
                      onSubmit={e => {
                        e.preventDefault();
                        handleSubmit();
                      }}
                    >
                      <div className="input-group">
                        <label>Email Id</label>
                        <input type="text" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} placeholder="yourname@example.com" />
                        {errors.email && touched.email && <span className="form-error">{errors.email}</span>}
                      </div>
                      <div className="input-group">
                        <label>Password</label>
                        <input type="password" name="password" onChange={handleChange} onBlur={handleBlur} value={values.password} placeholder="#@$!%@#" />
                        {errors.password && touched.password && <span className="form-error">{errors.password}</span>}
                      </div>
                      <div className="input-group">
                        <Button type="submit" className="btn btn-primary btn-submit" disabled={loading}>
                          {loading ? <Loader /> : "Login"}
                        </Button>
                      </div>
                    </Form>
                  )}
                </Formik>
                <div className="input-group justify-content-center">
                  <p className="text-center mb-0">
                    or{" "}
                    <Link href={`../signup/${props.type}`}>
                      <span style={{ textDecoration: "underline", cursor: "pointer" }}>Create a new account</span>
                    </Link>
                  </p>
                </div>
                {props && props.type == "user" && (
                  <>
                    <div className="input-group mb-0">
                      <div className="btn-continue">
                        <span className="col-1 image-container">
                          <Image src={renderImage("/images/login/icon-google.png")} layout="fill" className="image" />
                        </span>
                        <span className="col-10 text-center">Continue with Google</span>
                      </div>
                    </div>
                    <div className="input-group mb-0">
                      <div className="btn-continue">
                        <span className="col-1 image-container">
                          <Image src={renderImage("/images/login/icon-fb1.png")} layout="fill" className="image" />
                        </span>
                        <span className="col-10 text-center">Continue with Facebook</span>
                      </div>
                    </div>
                    <div className="input-group mb-0">
                      <div className="btn-continue mb-0">
                        <span className="col-1 image-container">
                          <Image src={renderImage("/images/login/icon-apple.png")} layout="fill" className="image" />
                        </span>
                        <span className="col-10 text-center">Continue with Apple</span>
                      </div>
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default Login;