import LinkButton from '@/components/LinkButton'
import { useParams } from '@/router'
import UserDetail from '@/users/UserDetail'
import usePrependNavbar from '@/views/Navbar/usePrependNavbar'
import CenteredSpinner from '@inject/shared/components/CenteredSpinner'
import Container from '@inject/shared/components/Container'
import flexedPage from '@inject/shared/css/flexedPage'

export const Pending = () => <CenteredSpinner />

const UserView = () => {
  const { userId } = useParams('/users/:userId')
  const element = usePrependNavbar(
    <LinkButton
      link={['/users']}
      button={{
        text: 'Users',
        icon: 'people',
        minimal: true,
      }}
      end
    />
  )
  return (
    <Container className={flexedPage}>
      {/* {portalNavbar &&
        loc.key !== 'default' &&
        createPortal(
          <LinkButton
            link={[-1]}
            button={{
              text: 'Back',
              icon: 'chevron-left',
              minimal: true,
            }}
            end
          />,
          portalNavbar
        )} */}
      {element}
      <UserDetail userId={userId} />
    </Container>
  )
}

export default UserView
