import React, { Component } from 'react'

import { Select } from '../../../../../common'

export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect }) => {
  if (!media.lookup) return <div />
  const { lookup, order } = media
  const video_list_items = order.filter(id => lookup[id].type === 'video').map(id => {
    const video = lookup[id]
    return {
      name: video.id,
      label: video.author + ' - ' + video.title
    }
  })
  return (
    <div>
      <Select
        name='media_id'
        className="media_id"
        selected={annotation.settings.media_id}
        options={video_list_items}
        defaultOption='Choose a video'
        onChange={handleSettingsSelect}
      />
    </div>
  )
}