import { Container } from 'react-bootstrap'

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

import styles from '../styles/UserPage.module.css'

function UserPage() {
    const user = useUser()

    return (
        <Container className={styles.sixteenXnine}>
            <BackHeader text={
                gotResponse(user) ? (
                    gotError(user) ? (
                        user.error
                    ) : (
                        `${user.data.nickname}, с нами с ${user.data.regDate}`
                    )
                ) : (
                    'Загрузка...'
                )
            }>
                <SignOut />
            </BackHeader>

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

            <div>
                <h5 className={styles.userRating}>
                    Ваша оценка:
                    <StarRating userId={user.data?.id || 1} />
                </h5>
            </div>

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

            <Poetry />
        </Container>
    )
}

export default UserPage