import { h } from 'preact';
import { route } from 'preact-router';
import { useContext, useState } from 'preact/hooks';
import AppState from '../../store/AppState';
import {Breadcrumbs, Warnbox} from '../../components';
import { CheckBox, Button, TextBox } from '../../components/controls';
import api from '../../api'
function Login() {
    let [sessiondata, setsession] = useContext(AppState).session;
    const [val, set] = useState({ username: '', password: '', error: null });
    const navigation = ["Login"];
    if (sessiondata.active)
        route('/', true);
    function onSubmit(e) {
        e.preventDefault();
        api.login(val.username, val.password).then(result => {
            if(result == 'login_failed'){
                set(prev=>({ ...prev, error: "login_failed",password: '' }));
            }
            else if(result=='network_error')
                set(prev=>({ ...prev, error: "network_connection" }));
            else {
                console.log(typeof(result))
                let newsession = {
                    type: 'start',
                    username: val.username,
                    token: result
                }
                setsession(newsession);
                set({ username: '', password: '' });
            }
            
        })

    }
    return (
        <div class="container">
            <Breadcrumbs items={navigation} />
            <div className={'contentbox'} >
                <h2>Anmeldung</h2>
                <p >Bitte melden Sie sich mit ihren Nutzerdaten an.</p>
 
                {val.error ==='login_failed' && <Warnbox title='Anmeldefehler'>Ungültige Anmeldedaten.<br />Bitte überprüfen Sie den eingebenen Benutzernamen und das Passwort.</Warnbox>}
                {val.error ==='network_connection' && <Warnbox title='Netwerkfehler'>Die Kommunikation mit dem Gerät ist zurzeit nicht möglich.<br />Bitte überprüfen Sie die Netzwerkverbindung.</Warnbox>}
                <form id="login_form" onSubmit={onSubmit} >
                    <div className='row'>
                        <TextBox maxlength={25} formdata={val} formchange={set} id="username" label="Benutzername" />
                    </div>
                    <div className='row'>
                        <TextBox maxlength={25} formdata={val} formchange={set} id="password" label="Passwort" type='password' />

                    </div>
                    <div className='row'>
                        <CheckBox id="permanent" formdata={val} formchange={set} label="Angemeldet bleiben?" />

                    </div>
                    <Button onClick={onSubmit}>Anmelden</Button>

                </form>
            </div>
        </div>
    );

}

export default Login;