/* eslint-disable no-nested-ternary */
import { Button, Form, Input } from 'antd';
import React from 'react';
import { useStore } from '../../stores/StoreProvider';
import './Login.scss';
import { useNavigate } from 'react-router-dom';

export const Login = (): JSX.Element => {
  const { appStore } = useStore();
  const navigate = useNavigate();

  type LoginProps = { username: string; password: string };
  const onFinish = async ({
    username,
    password,
  }: LoginProps): Promise<void> => {
    await appStore.autentification({ username, password }, navigate);
  };

  return (
    <div className="flex-aijc-colum loginContainer">
      <div className="flex-aijc-colum">
        <div data-test="header_logo" className="logo_login" />
        <br />
        <div className="loginContainer_inner flex-aijc-colum ">
          <h4 className="loginText flex-aijc">Sign in to start your session</h4>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            // onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="Username"
              name="username"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="Password"
              name="password"
              rules={[
                { required: true, message: 'Please input your password!' },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <div className="logginButton flex-aijc">
              <Button
                type="primary"
                htmlType="submit"
                className="logginButton flex-aijc"
              >
                Submit
              </Button>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
};
