import { useVideosQuery, Video } from '../../gql'
import { FunctionComponent, ChangeEvent, useState } from 'react'
import Dropdown from '../../dropdown/components/Dropdown'
import EditVideo from './EditVideo'
import { Modal } from '../../modal'

const VideoSelector: FunctionComponent<{
  name?: string
  value?: Partial<Video>[]
  onChange: (event: ChangeEvent<HTMLSelectElement>) => void
}> = ({ name }) => {
  const [modal, setModal] = useState(false)
  const { data, error, loading } = useVideosQuery()

  const videolist = error ? (
    <option>Error loading videos.</option>
  ) : loading ? (
    <option>Loading videos...</option>
  ) : (
    data?.videos.map((video) => <li>{video.title}</li>)
  )

  return (
    <>
      <Dropdown name='video' value='12' onChange={(ev) => console.log(ev)} items={[]}></Dropdown>
      <button onClick={() => setModal(true)}>Add video</button>
      <Modal state={[modal, setModal]}>
        <EditVideo />
      </Modal>
    </>
  )
}

export default VideoSelector
