import { useState } from 'react';
import { useAuthStore } from '../../auth/authStore';

/* Components */
import TextField from '../inputs/TextField';
import Button from '../inputs/Button';

export default function LoginPage() {
    const setAccessToken = useAuthStore((s) => s.setAccessToken);

    const [email, _email] = useState('');
    const [password, _password] = useState('');

    const login = async () => {
        const res = await fetch(`${import.meta.env.VITE_SERVER}/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            credentials: 'include',
            body: JSON.stringify({
                email,
                password,
            }),
        });
        const data = await res.json();
        setAccessToken(data.accessToken);
    };

    return (<div className="flex flex-col grow max-h-screen overflow-hidden p-10">
        <main className="flex flex-col grow h-full w-1/3">
            <TextField
                label='E-mail'
                name="email"
                value={email}
                onChange={_email}
            />
            <TextField
                label='Password'
                inputType="password"
                name="password"
                value={password}
                onChange={_password}
            />

            <div>
                <Button onClick={login} label="Login" />
            </div>
        </main>
    </div>
    );
}