import { Box, Button, Stack, Text } from '@chakra-ui/react'
import { createFileRoute } from '@tanstack/react-router'

import { gql, useQuery } from '@apollo/client'

import { BooksManyQuery } from '@generated/types'

export const Route = createFileRoute('/example')({
  component: Dashboard,
})

function Dashboard() {
  const { data, refetch } = useQuery<BooksManyQuery>(getBooksQuery)

  return (
    <Stack>
      <Text>Hello world!</Text>
      <Text>This is my template!</Text>
      <Stack>
        {data && (
          <>
            {data.booksMany.map((book: any) => (
              <Stack key={book.id}>
                <Text>{book.title}</Text>
                <Text>{book.author}</Text>
              </Stack>
            ))}
          </>
        )}
        <Box>
          <Button onClick={async () => refetch()}>Refetch</Button>
        </Box>
      </Stack>
    </Stack>
  )
}

const getBooksQuery = gql`
  query BooksMany {
    booksMany {
      id
      author
      title
    }
  }
`