import styles from './Form.module.scss';
import { publicRuntimeConfig } from '@/config/runtime';
import Button from '@/elements/Button';
import Error from '@/elements/Error';
import { H3 } from '@/elements/H';
import Input from '@/elements/Input';
import axios from 'axios';
import { useState } from 'react';

const { BASE_PATH, APP_TITLE } = publicRuntimeConfig;

export default function Form() {
  const [hasError, setHasError] = useState(false);
  const error = hasError ? <Error>Неверный логин или пароль</Error> : null;

  return (
    <form
      className={styles.form}
      onSubmit={(e) => {
        e.preventDefault();

        const login = e.target[0].value;
        const password = e.target[1].value;
        const data = { login, password };

        axios
          .post('/signin', data)
          .then(() => {
            const url =
              (window.location.pathname.replace(BASE_PATH, '') || '/') +
              (window.location.search || '');

            window.location.replace(url);
          })
          .catch(() => {
            setHasError(true);
          });
      }}
    >
      <H3>{APP_TITLE}</H3>
      <Input name="login" type="text" placeholder="Логин" required autoComplete="on" />
      <Input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
      {error}
      <Button>Войти</Button>
    </form>
  );
}