import React, { useCallback, useEffect, useRef } from 'react';
import { Button } from 'react-bootstrap';
import { useAuth } from './context/auth';
import { login } from '../../types';
import './Login.css';

/**
 * Formulář pro prvotní zadání přihlašovacího jména.
 */
export default function Login() {
  const auth = useAuth();
  const loginRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (auth && !auth.login) {
      // Vyzkoušíme přihlášení "naprázdno", pokud projde, přihlásili nás trusted headers
      login().then(response => {
        const token = response.data;
        if (token) {
          auth?.setToken(token as unknown as string); // TODO vyřešit, API definice je špatně, je to skutečně string
        }
      }).catch(error => {
        // nezajímá nás
      });
    }
  }, [auth]);

  const doLogin = useCallback(async () => {
    const length = loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
    if (length) {
      const response = await login({ body: { login: loginRef.current?.value } });
      if (response.data) {
        auth?.setToken(response.data as unknown as string); // TODO vyřešit
      }
    }
  }, [auth]);

  if (!auth?.login) {
    return <div className='login'>
      <h1>Luncher</h1>
      <h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>
      <div className='login-inner'>
        <p style={{ fontSize: "12px", marginTop: "10px" }}>
          Zobrazované jméno by mělo být vaše jméno nebo přezdívka, pod kterou vás kolegové dokáží snadno identifikovat. Jméno je možné kdykoli změnit.
        </p>
        Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
          if (event.key === 'Enter') {
            doLogin()
          }
        }} />
        <Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
      </div>
    </div>
  }
  return <div>Neplatný stav</div>
}