text: import SignIn from '../components/SignIn'
  import Episode from '../components/Episode'
  import { useAuth } from '../lib/auth'
  import { gql, useQuery, useMutation } from '@apollo/client'
  import {
    Container,
    FormControl,
    Select,
    Button,
    Flex,
    VStack,
    Popover,
    PopoverTrigger,
    PopoverContent,
    PopoverArrow,
    PopoverHeader,
    PopoverCloseButton,
    PopoverBody,
    Input,
  } from '@chakra-ui/react'
  import { useState } from 'react'
  import { AddIcon } from '@chakra-ui/icons'
  
  const GET_PLAYLISTS = gql`
    {
      playlists {
        name
        episodes {
          title
          id
          audio
          summary
          image
          pubDate
          podcast {
            title
            image
          }
        }
      }
    }
  `
  
  const CREATE_PLAYLIST = gql`
    mutation createNewPlaylist($playlistName: String!) {
      createPlaylist(name: $playlistName) {
        name
      }
    }
  `
  
  export default function Playlists() {
    const { isSignedIn } = useAuth()
    const [selectedPlaylist, setSelectedPlaylist] = useState('')
    const [newPlaylist, setNewPlaylist] = useState('')
    const { data } = useQuery(GET_PLAYLISTS)
    const [createPlaylist] = useMutation(CREATE_PLAYLIST)
  
    const filteredPlaylist = data?.playlists?.filter((p) => {
      return p.name === selectedPlaylist
    })[0]
  
    return (
      <Container>
        {!isSignedIn() && <SignIn />}
        {isSignedIn() && (
          <div>
            <FormControl id="playlists">
              <Flex>
                <Select
                  placeholder="Select playlist"
                  onChange={(e) => setSelectedPlaylist(e.target.value)}
                >
                  {data?.playlists?.map((p) => {
                    return (
                      <option key={p.name} value={p.value}>
                        {p.name}
                      </option>
                    )
                  })}
                </Select>
                <Popover>
                  <PopoverTrigger>
                    <Button ml={4}>
                      <AddIcon />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent>
                    <PopoverArrow />
                    <PopoverCloseButton />
                    <PopoverHeader>Create new playlist</PopoverHeader>
                    <PopoverBody>
                      <FormControl id="newplaylist">
                        <Input
                          type="text"
                          onChange={(e) => setNewPlaylist(e.target.value)}
                        />
                        <Button
                          mt={4}
                          onClick={() =>
                            createPlaylist({
                              variables: { playlistName: newPlaylist },
                              update: (proxy) => {
                                const data = proxy.readQuery({
                                  query: GET_PLAYLISTS,
                                })
  
                                proxy.writeQuery({
                                  query: GET_PLAYLISTS,
                                  data: {
                                    playlists: [
                                      ...data.playlists,
                                      {
                                        __typename: 'Playlist',
                                        name: newPlaylist,
                                      },
                                    ],
                                  },
                                })
                              },
                            })
                          }
                        >
                          Create
                        </Button>
                      </FormControl>
                    </PopoverBody>
                  </PopoverContent>
                </Popover>
              </Flex>
            </FormControl>
            <VStack mt={4} spacing={4}>
              {filteredPlaylist?.episodes?.map((e) => {
                return (
                  <Episode key={e.id} episode={e} playlists={data.playlists} />
                )
              })}
            </VStack>
          </div>
        )}
      </Container>
    )
  }
  