import React, { useCallback, useRef } from 'react';
import { Button } from 'react-bootstrap';
import { useAuth } from './context/auth';
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);

  const doLogin = useCallback(() => {
    const length = loginRef?.current?.value && loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
    if (length) {
      auth?.setLogin(loginRef.current.value);
    }
  }, []);

  if (!auth || !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>
  }
}