import { Container } from 'react-bootstrap'

import { useUser } from '../hooks/api'
import { userCategories } from '../assets/userCategories'
import { BackHeader, CategoryPreview, Poetry, Points, SignOut } from '../components'
import { gotError, gotResponse } from '../hooks/useFetch'

function UserPage() {
    const user = useUser()

    return (
        <Container style={{ maxWidth: 'calc(100vh*9/16)' }}>
            <BackHeader text={
                gotResponse(user) ? (
                    gotError(user) ? (
                        user.error
                    ) : (
                        `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
                    )
                ) : (
                    'Загрузка...'
                )
            }>
                <SignOut />
            </BackHeader>

            <Points points={
                gotResponse(user) ? (
                    gotError(user) ? -1 : user.data?.points
                ) : (
                    'Загрузка...'
                )
            } />

            {userCategories.map(cat => (
                <CategoryPreview key={cat} category={cat} />
            ))}

            <Poetry />
        </Container>
    )
}

export default UserPage
