import React from 'react'
import { useParams } from 'react-router-dom'
import { useQuery } from 'react-query'

import { BookService } from '@/services/DatabaseService'
import PageHeading from '@/components/ui/PageHeading'
import BookDetail from '@/components/book/Detail'
import Alert from '@/components/ui/Alert'

function ScreenBookDetail() {
  const { id } = useParams()
  const { data, isLoading, error, status } = useQuery(
    ['book', { id }],
    BookService.getOne
  )

  return (
    <>
      <PageHeading title="Book Detail" />
      {error && <Alert type="error" message={error.message} />}
      {isLoading && (
        <Alert
          type="info"
          message="Loading..."
          innerClass="animate animate-pulse"
        />
      )}
      {status === 'success' && <BookDetail book={data} />}
    </>
  )
}

export default ScreenBookDetail