import { useCallback, useState } from 'react'
import { Tabs, Tab } from 'react-bootstrap'
import { useNavigate } from 'react-router-dom'

import { AuthForm } from '../components'
import { isLiteralUnion } from '../utils/types'
import CardLayout from '../components/CardLayout'

const tabKeys = ['register', 'login'] as const
type TabKeys = typeof tabKeys[number]

const isTabKeys = (s: string | null): s is TabKeys => (
    isLiteralUnion(s, tabKeys)
)

function LoginPage() {
    const navigate = useNavigate()

    const [tab, setTab] = useState<TabKeys>('register')

    const goBack = useCallback(() => (
        navigate(-1 - Number(import.meta.env.DEV))
    ), [navigate])

    return (
        <CardLayout text='Представьтесь'>
            <Tabs
                activeKey={tab}
                onSelect={(k) => isTabKeys(k) && setTab(k)}
                fill justify
                className='mb-3'
            >
                <Tab eventKey='register' title='Регистрация'>
                    <AuthForm goBack={goBack} register={true} />
                </Tab>
                <Tab eventKey='login' title='Вход'>
                    <AuthForm goBack={goBack} register={false} />
                </Tab>
            </Tabs>
        </CardLayout>
    )
}

export default LoginPage
