import React from "react";
import { Form, Input, Button, Row, Col } from "antd";
import { Helmet } from "react-helmet-async";
import { useAuth } from "../../hooks";
import "../../styles/LoginForm.less";
const { REACT_APP_VERSION } = process.env;

const Ingresar = () => {
  const { signIn, sessionLoading } = useAuth();

  const onFinish = (values) => {
    try {
      const { usuario, clave } = values;
      signIn(usuario, clave);
    } catch (e) {
      console.log(e);
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <>
      <Helmet>
        <title> LAUD - Iniciar Sesión</title>
      </Helmet>
      <div className="ed-app-login-wrap">
        <div className="ed-app-login-container">
          <div className="ed-app-login-main-content">
            <div className="ed-app-logo-content">
              <div className="ed-app-logo-content-bg">
                <img src="./assets/login-bg.png" alt="bg" />
              </div>
              <div className="ed-app-logo-wid">
                <h1>Iniciar sesión</h1>
                <p>Bienvenido</p>
              </div>
              <div className="ed-app-logo">
                {/* <img src="./assets/logo.png" alt="logo" width="150" /> */}
              </div>
            </div>
            <div className="ed-app-login-content">
              <Form
                name="basic"
                layout="vertical"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                className="ed-signin-form"
              >
                <Row>
                  <Col span={24}>
                    <Form.Item
                      name="usuario"
                      rules={[
                        {
                          required: true,
                          message:
                            "Por favor ingresa un usuario o un correo electrónico",
                        },
                      ]}
                    >
                      <Input
                        autoComplete="off"
                        placeholder="Ingresa su usuario o correo electrónico"
                      />
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Form.Item
                      name="clave"
                      rules={[{ required: true, message: "No dejar vacio" }]}
                    >
                      <Input.Password
                        autoComplete="off"
                        placeholder="Ingresa una contraseña"
                      />
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Form.Item>
                      <Button
                        className="ck-btn"
                        type="primary"
                        htmlType="submit"
                        size="middle"
                        loading={sessionLoading}
                      >
                        Ingresar
                      </Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
              <div className="ed-app-login-footer" style={{ paddingTop: 60 }}>
                <Col span={24}>
                  Derechos reservados {new Date().getFullYear()} &#xa9; - {REACT_APP_VERSION}
                </Col>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Ingresar;