import React, { Component } from 'react'

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

export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
  if (!media.lookup) return <div />
  const image_list_items = makeMediaItems(media, ['gallery'])
  return (
    <div className='options'>
      <Select
        name='media_id'
        className="media_id"
        selected={annotation.settings.media_id}
        options={image_list_items}
        defaultOption='Choose a gallery'
        onChange={handleSettingsSelect}
      />

      <TextInput
        title="Title"
        name="title"
        placeholder="Enter title or leave blank"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
      
      <Checkbox
        label="Fullscreen"
        name="fullscreen"
        checked={annotation.settings.fullscreen}
        onChange={handleSettingsSelect}
      />

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

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

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

      <Select
        title='Arrow Color'
        name='arrow_color'
        selected={annotation.settings.arrow_color}
        options={CURTAIN_COLOR_SELECT_OPTIONS}
        defaultOption='Color of UI arrows'
        onChange={handleSettingsSelect}
      />

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

export const AnnotationFormGalleryAdvance = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
  if (!media.lookup) return <div />
  const image_list_items = makeMediaItems(media, ['gallery'])
  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
  return (
    <div className='options'>
      <Select
        name='media_id'
        className="media_id"
        selected={annotation.settings.media_id}
        options={image_list_items}
        defaultOption='Choose a gallery'
        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="Advance half a frame forward to fit two images in view"
        name="half_frame"
        checked={annotation.settings.half_frame}
        onChange={handleSettingsSelect}
      />

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

      <Checkbox
        label="Show in checklist"
        name="show_in_checklist"
        checked={annotation.settings.show_in_checklist}
        onChange={handleSettingsSelect}
      />
    </div>
  )
}