import React, { Component } from 'react'

import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_INLINE_SIZE_OPTIONS } from 'app/constants'
import { Select, Checkbox, TextInput } from 'app/common'
import { AnnotationFormFullscreen } from './annotationForm.utility'
import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'

export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
  if (!media.lookup) return <div />
  const image_list_items = makeMediaItems(media, ['image', 'gallery'])
  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
  console.log(annotation)
  return (
    <div className='options'>
      <Select
        name='media_id'
        className="media_id"
        selected={annotation.settings.media_id}
        options={image_list_items}
        defaultOption='Choose an image'
        onChange={handleSettingsSelect}
      />

      {gallery_items && (
        <Select
          name='frame_index'
          selected={annotation.settings.frame_index}
          options={gallery_items}
          defaultOption='Choose an image'
          onChange={handleSettingsSelect}
        />
      )}

      {thumbnail && (
        <img src={thumbnail.url} />
      )}

      <Checkbox
        label="Fullscreen"
        name="fullscreen"
        checked={annotation.settings.fullscreen}
        onChange={handleSettingsSelect}
      />

      <Select
        title='Color'
        name='color'
        selected={annotation.settings.color}
        options={CURTAIN_COLOR_SELECT_OPTIONS}
        defaultOption='Pick a color'
        onChange={handleSettingsSelect}
      />

      {(annotation.settings.fullscreen) && (
        <div>
          <Checkbox
            label="Hide inline image"
            name="hide_poster_inline"
            checked={annotation.settings.hide_poster_inline}
            onChange={handleSettingsSelect}
          />
          <Select
            title='Inline size'
            name='inline_size'
            selected={annotation.settings.inline_size}
            options={IMAGE_INLINE_SIZE_OPTIONS}
            defaultOption='Pick a size'
            onChange={handleSettingsSelect}
          />
          <Checkbox
            label="Hide speaker icon"
            name="hide_speaker_icon"
            checked={annotation.settings.hide_speaker_icon}
            onChange={handleSettingsSelect}
          />
          <Select
            title='Inline background color'
            name='inline_color'
            selected={annotation.settings.inline_color}
            options={CURTAIN_COLOR_SELECT_OPTIONS}
            defaultOption='Pick a color'
            onChange={handleSettingsSelect}
          />
        </div>
      )}

      <Checkbox
        label="Hide caption"
        name="hide_caption"
        checked={annotation.settings.hide_caption}
        onChange={handleSettingsSelect}
      />

      <Checkbox
        label="Hide in transcript"
        name="hide_in_transcript"
        checked={annotation.settings.hide_in_transcript}
        onChange={handleSettingsSelect}
      />

      <TextInput
        title="Override start time"
        name="override_start_ts"
        className="number"
        placeholder="0:00"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />

      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
        <AnnotationFormFullscreen
          annotation={annotation}
          handleSettingsChange={handleSettingsChange}
          handleSettingsSelect={handleSettingsSelect}
        />
      )}
    </div>
  )
}