import React from "react";
//@ts-ignore
import { connect } from "react-redux";
import { Subject } from "rxjs";

import Link from "next/link";
import { logIn } from "lib/redux/actions/auth-actions";
import { AnyAction, bindActionCreators, Dispatch } from "redux";
// import Helmet from '@lib/helmet';
// import { GuardSpinner } from 'react-spinners-kit';
import {
  notification,
  Row,
  Col,
  Form,
  Input,
  Button,
  Typography,
  Avatar,
  Space,
} from "antd";
import loginimg from "assets/images/signup.jpg";
import { UserOutlined } from "@ant-design/icons";
import Helmet from "lib/helmet";
import ForgotPassword from "components/forgot-password";
import Image from "next/image";

const Login = ({
    logIn,
    status,
    location,
  }: {
    logIn?: any;
    status?: any;
    location?: any;
  }) => {

    console.log(status, logIn, location);

    const [loginFormData, setLoginFormData] = React.useState({
        email: "",
        password: "",
      }),
      formInput = new Subject();

    formInput.subscribe((e) => {
      const {
          target: { name, value },
        }: Record<string, any> = e,
        newLoginFormData = loginFormData;
      newLoginFormData[name] = value;
      setLoginFormData({ ...newLoginFormData });
    });

    const onFinish = (payload: any) => {
        logIn(payload, location?.state?.rdr)
        console.log("form submitted")
    };

    React.useEffect(() => {
      if (location?.state?.rdr)
        notification.warning({
          message: location?.state?.rdr.message?.title,
          description: location?.state?.rdr.message?.description,
        });
    }, []);

    React.useEffect(() => {
      setTimeout(() => {
        status?.isloggedin
          ? (window.location.href = location?.state?.rdr.path ?? "/")
          : null;
      }, 2e3);
    }, [status]);

    // {status?.isloggingin
    // 	? (
    // 		<div style={loader.styles}>
    // 			<GuardSpinner size={30} color="#686769" loading={true} />
    // 		</div>
    // 	)
    // 	: null}

    const helmet = {
      styles: ".footer-area{display: none;}",
      pageUrl: "/login",
      pageTitle:   "Ashantiweb | LOGIN",
    };

    return (
      <>
        <Helmet {...helmet}></Helmet>
        <section className="log">
          <div className="container log-hol">
            <Row>
              <Col
                className="lg1 d-none d-md-block"
                xs={{ span: 24 }}
                md={{ span: 12 }}
              >
                <Image src={loginimg} alt="" />
              </Col>
              <Col
                className="lg2 container text-center"
                xs={{ span: 24 }}
                md={{ span: 12 }}
              >
                <Form onFinish={onFinish}>
                  <Space direction="vertical" size={50}>
                    <Space direction="vertical" size={10}>
                      <Avatar size={100} icon={<UserOutlined />} />
                      <Typography.Title
                        level={1}
                        style={{ fontSize: "20px", fontWeight: 500 }}
                        className="font-2"
                      >
                        Login to your account
                      </Typography.Title>
                    </Space>
                    <Row gutter={[12, 0]} className="justify-content-center">
                      <Col span={24} className="mb-20">
                        <a
                          href="/auth/google"
                          target="_blank"
                          className="btn btn-sm btn-primary"
                        >
                          <i className="fab fa-google pr-1"></i>
                          <span>Sign in with Google</span>
                        </a>
                      </Col>
                      <Col
                        sm={{ span: 24 }}
                        md={{ span: 12 }}
                        style={{ width: "100%" }}
                      >
                        <Form.Item noStyle className="w-100">
                          <Form.Item rules={[{ required: true }]} name="email">
                            <Input
                              size="large"
                              placeholder="Email or Username"
                              type="text"
                            />
                          </Form.Item>
                          <p className="text-danger">
                            {status?.error?.email?.join("<br />")}
                          </p>
                        </Form.Item>
                      </Col>
                      <Col
                        sm={{ span: 24 }}
                        md={{ span: 12 }}
                        style={{ width: "100%" }}
                      >
                        <Form.Item noStyle>
                          <Form.Item
                            rules={[{ required: true }]}
                            name="password"
                          >
                            <Input.Password
                              size="large"
                              placeholder="Password"
                            />
                          </Form.Item>
                          <p className="text-danger">
                            {status?.error?.password?.join("<br />")}
                          </p>
                        </Form.Item>
                      </Col>
                      <Col span={24}>
                        <Form.Item
                          style={{
                            display: "d-flex",
                            justifyContent: "center",
                          }}
                        >
                          <Button
                            loading={status?.isloggingin}
                            type="primary"
                            htmlType="submit"
                            style={{
                              background: "#3db83a",
                              borderColor: "#3db83a",
                              width: "200px",
                            }}
                          >
                            Log in to your account
                          </Button>
                        </Form.Item>
                        <Form.Item>
                          <span
                            style={{ color: "#1890ff", cursor: "pointer" }}
                            className="login-form-forgot"
                          >
                            <ForgotPassword />
                          </span>
                        </Form.Item>
                        <Form.Item>
                          <Link href="/register">
                            <a href="" className="login-form-forgot">
                              Create An Account
                            </a>
                          </Link>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Space>
                </Form>
              </Col>
            </Row>
          </div>
        </section>
      </>
    );
  },
  mapStateToProps = (state: any) => state,
  mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
    bindActionCreators(
      {
        logIn,
      },
      dispatch
    );

export default connect(mapStateToProps, mapDispatchToProps)(Login);