import React from "react";
import "./index.less";
import Header from "../../components/Header";
import { Form, Input, Button, Checkbox, Row, Col } from "antd";
import _auth from "@netuno/auth-client";

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 2, span: 16 },
};

const Login = () => {
  const onFinish = (values) => {
    _auth.login({
      username: values.username,
      password: values.password,
      success: () => {
        alert("Login efetuado");
      },
      fail: () => {
        alert("ocorreu um erro");
      },
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="login">
      <Header />
      <Row justify="start" style={{ padding: "12% 20px" }}>
        <Col span={12}></Col>
        <Col span={12}>
          <Form
            {...layout}
            className="login__form"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="Username"
              name="username"
              rules={[
                { required: true, message: "Por favor digite o seu nome de usuário." }
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="Senha"
              name="password"
              rules={[
                { required: true, message: "Por favor digite uma senha" },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>Lembrar dados de login.</Checkbox>
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button
                type="primary"
                htmlType="submit"
                className="login__submit"
              >
                Entrar
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  );
};

export default Login;
