import { useCallback } from 'react'
import FeedView from '../components/FeedView.tsx'
import { PostsService } from '../posts/postsService.ts'
import { useParams } from 'react-router-dom'
import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
import NavBar from '../../../components/NavBar.tsx'
import { useFeedViewModel } from '../components/FeedView.ts'
import NavLinkButton from '../../../components/NavLinkButton.tsx'

interface AuthorPageParams {
  postsService: PostsService
}

export default function AuthorPage({ postsService }: AuthorPageParams) {
  const { username } = useParams()

  const fetchPosts = useCallback(
    async (cursor: string | null, amount: number | null) => {
      return postsService.loadByAuthor(username!, cursor, amount)
    },
    [postsService, username],
  )

  const { pages, loadNextPage } = useFeedViewModel(fetchPosts)

  return (
    <SingleColumnLayout
      navbar={
        <NavBar>
          <NavLinkButton to={'/'}>home</NavLinkButton>
          <NavLinkButton to="/logout">logout</NavLinkButton>
        </NavBar>
      }
    >
      <FeedView pages={pages} onLoadMore={loadNextPage} />
    </SingleColumnLayout>
  )
}