import React, { Component } from 'react'

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

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