import { FormEventHandler, useCallback } from 'react'
import { Button, ButtonGroup, Form } from 'react-bootstrap'

import { useSignIn, useSignUp } from '../hooks/api'
import { composeSignUpBody } from '../api/signup'

type AuthFormProps = {
    goBack: () => void,
}

const AuthForm = ({ goBack }: AuthFormProps) => {
    const { handleSignUp, signUpButton } = useSignUp()

    const { handleSignIn, signInButton } = useSignIn()

    const handleAuth: FormEventHandler<HTMLFormElement> = useCallback((e) => {
        e.preventDefault()
        e.stopPropagation()

        const formData = new FormData(e.currentTarget)

        const register = (e.nativeEvent as SubmitEvent).submitter?.id === 'register'

        void (async () => {
            const accountCreated = register ? (
                await handleSignUp(composeSignUpBody(formData))
            ) : true

            if (accountCreated) {
                if (await handleSignIn(formData)) {
                    goBack()
                }
            }

        })()
    }, [goBack, handleSignUp, handleSignIn])

    return (
        <Form onSubmit={handleAuth}>
            <Form.Group className='mb-3' controlId='username'>
                <Form.Label>Как меня называть</Form.Label>
                <Form.Control placeholder='Имя или псевдоним' name='username' type='text' required />
            </Form.Group>

            <Form.Group className='mb-3' controlId='password'>
                <Form.Label>И я могу доказать, что это я</Form.Label>
                <Form.Control placeholder='Пароль' name='password' type='password' required />
            </Form.Group>

            <Form.Group className='mb-3' controlId='privacyPolicyConsent'>
                <Form.Check>
                    <Form.Check.Input type='checkbox' required />
                    <Form.Check.Label>
                        Я согласен с{' '}
                        <a
                            href={`${document.location.origin}/privacy_policy.pdf`}
                            target='_blank'
                        >условиями обработки персональных данных</a>
                    </Form.Check.Label>
                </Form.Check>
            </Form.Group>

            <ButtonGroup className='d-flex'>
                <Button
                    className='w-100'
                    id='register'
                    variant='success'
                    type='submit'
                    {...signUpButton}
                />
                <Button
                    className='w-100'
                    id='login'
                    variant='success'
                    type='submit'
                    {...signInButton}
                />
            </ButtonGroup>
        </Form>
    )
}

export default AuthForm