import { FormEventHandler } from 'react'
import { Card, Tabs, Tab } from 'react-bootstrap'
import { useNavigate } from 'react-router-dom';

import { useAuth } from '../hooks/api';
import { setToken } from '../utils/auth';
import { AuthForm } from '../components';

function LoginPage() {
    const navigate = useNavigate()

    const { doAuth, loading, error } = useAuth()

    const handleAuth = (newAccount: boolean): FormEventHandler<HTMLFormElement> => async (event) => {
        event.preventDefault();
        event.stopPropagation();

        const formData = new FormData(event.currentTarget)

        const data = {
            email: formData.get('email') as string,
            name: newAccount ? formData.get('name') as string : undefined,
            surname: newAccount ? formData.get('surname') as string : undefined,
            password: formData.get('password') as string
        }

        const token = import.meta.env.PROD ? await doAuth(data, newAccount) : 'a'

        if (token) {
            setToken(token)
            navigate(-1 - Number(import.meta.env.DEV))
        }
    }

    return (
        <Card className='m-4'>
            <Card.Body>
                <Tabs defaultActiveKey='register' fill justify className='mb-3'>
                    <Tab eventKey='register' title='Регистрация'>
                        <AuthForm handleAuth={handleAuth(true)} register={true} loading={loading} error={error} />
                    </Tab>
                    <Tab eventKey='login' title='Вход'>
                        <AuthForm handleAuth={handleAuth(false)} register={false} loading={loading} error={error} />
                    </Tab>
                </Tabs>
            </Card.Body>
        </Card>
    )
}

export default LoginPage