import { Form, Button, Card, Tabs, Tab } from "react-bootstrap"
import { useNavigate } from "react-router-dom";

import { useAuth } from "../hooks/api";
import { setToken } from "../utils/auth";

function LoginPage() {
    const navigate = useNavigate()

    const doAuth = useAuth()

    const handleAuth = (newAccount) => (event) => {
        event.preventDefault();
        event.stopPropagation();

        const formData = new FormData(event.currentTarget)

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

        const token = "a" // doAuth(data, newAccount)

        setToken(token)

        navigate("/")
    }

    return (
        <Card className="m-4">
            <Card.Body>
                <Tabs defaultActiveKey="register" fill justify className="mb-3">
                    <Tab eventKey="register" title="Регистрация">
                        <Form onSubmit={handleAuth(true)}>
                            <Form.Group className="mb-3" controlId="email">
                                <Form.Label>Почта</Form.Label>
                                <Form.Control type="email" required />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="name">
                                <Form.Label>Имя</Form.Label>
                                <Form.Control type="text" required />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="surname">
                                <Form.Label>Фамилия</Form.Label>
                                <Form.Control type="text" required />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="password">
                                <Form.Label>Пароль</Form.Label>
                                <Form.Control type="password" required />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="privacyPolicyConsent">
                                <Form.Check type="checkbox" required label="Я согласен с условиями обработки персональных данных" />
                            </Form.Group>

                            <Button variant="success" type="submit">
                                Зарегистрироваться
                            </Button>
                        </Form>
                    </Tab>
                    <Tab eventKey="login" title="Вход">
                        <Form onSubmit={handleAuth(false)}>
                            <Form.Group className="mb-3" controlId="email">
                                <Form.Label>Почта</Form.Label>
                                <Form.Control type="email" required />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="password">
                                <Form.Label>Пароль</Form.Label>
                                <Form.Control type="password" required />
                            </Form.Group>

                            <Button variant="success" type="submit">
                                Войти
                            </Button>
                        </Form>
                    </Tab>
                </Tabs>
            </Card.Body>
        </Card>
    )
}

export default LoginPage