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

type AuthFormProps = {
    register: boolean
    handleAuth: FormEventHandler<HTMLFormElement>,
    loading: boolean,
    error: string
}

function AuthForm ({ handleAuth, register, loading, error }: AuthFormProps) {
    const buttonText = loading ? 'Загрузка...' : (error || (register ? 'Зарегистрироваться' : 'Войти'))

    return (
        <Form onSubmit={handleAuth}>
            <Form.Group className='mb-3' controlId='email'>
                <Form.Label>Почта</Form.Label>
                <Form.Control type='email' required />
            </Form.Group>

            {register && <>
                <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>

            {register &&
                <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' rel='noopener noreferrer'>условиями обработки персональных данных</a>
                        </Form.Check.Label>
                    </Form.Check>
                </Form.Group>
            }

            <Button variant='success' type='submit'>
                {buttonText}
            </Button>
        </Form>
    )
}

export default AuthForm