import { useLazyQuery, gql } from '@apollo/client'
import { useState } from 'react'
import { useAuth } from '../lib/auth'
import SignIn from '../components/SignIn'
import Podcast from '../components/Podcast'

import {
  FormControl,
  FormLabel,
  Input,
  Button,
  Container,
  Flex,
  VStack,
} from '@chakra-ui/react'

const PodcastSearchQuery = gql`
  query podcastSearch($searchTerm: String!) {
    podcastSearch(searchTerm: $searchTerm) {
      itunesId
      title
      description
      feedURL
      artwork
      categories
    }
  }
`

const Podcasts = () => {
  const [getPodcasts, { data }] = useLazyQuery(PodcastSearchQuery)
  const { isSignedIn } = useAuth()
  const [searchString, setSearchString] = useState('')
  return (
    <Container>
      {!isSignedIn() && <SignIn />}
      {isSignedIn() && (
        <div>
          <FormControl id="podcastsearch">
            <FormLabel>Search podcasts</FormLabel>
            <Flex>
              <Input onChange={(e) => setSearchString(e.target.value)} />
              <Button
                ml={4}
                onClick={() =>
                  getPodcasts({ variables: { searchTerm: searchString } })
                }
              >
                Search
              </Button>
            </Flex>
          </FormControl>
          <VStack>
            {data?.podcastSearch.map((p) => {
              return <Podcast podcast={p} />
            })}
          </VStack>
        </div>
      )}
    </Container>
  )
}

export default Podcasts