import React, { Component } from 'react'

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

export const AnnotationFormSectionHeading = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
  const image_list_items = makeMediaItems(media, ['image', 'video', 'gallery'])
  return (
    <div className='options'>
      <Checkbox
        label="Hidden"
        name="hidden"
        checked={annotation.settings.hidden}
        onChange={handleSettingsSelect}
      />
      <Select
        title='Background Color'
        name='color'
        selected={annotation.settings.color}
        options={BLACK_WHITE_SELECT_OPTIONS}
        defaultOption='Pick a color'
        onChange={handleSettingsSelect}
      />
      <Select
        title='Cover image'
        name='media_id'
        className="media_id"
        selected={annotation.settings.media_id}
        options={image_list_items}
        defaultOption='Choose an image'
        onChange={handleSettingsSelect}
      />
      <Select
        title='Cover style'
        name='cover_style'
        className="cover_style"
        selected={annotation.settings.cover_style}
        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
        defaultOption='Cover image caption style'
        onChange={handleSettingsSelect}
      />
      <LabelDescription>
        {'Background color for section'}
      </LabelDescription>
      <Select
        title='Transition Color'
        name='transition_color'
        selected={annotation.settings.transition_color}
        options={CURTAIN_COLOR_SELECT_OPTIONS}
        defaultOption='Pick a color'
        onChange={handleSettingsSelect}
      />
      <LabelDescription>
        {'Player will fade from this color when section begins'}
      </LabelDescription>
      {!annotation.settings.no_audio &&
        <div>
          <Select
            title='Section Nav Color'
            name='section_nav_color'
            selected={annotation.settings.section_nav_color}
            options={BLACK_WHITE_SELECT_OPTIONS}
            defaultOption='Pick a color'
            onChange={handleSettingsSelect}
          />
          <LabelDescription>
            {'Section nav thumbnail icon color'}
          </LabelDescription>
        </div>
      }
      <Checkbox
        label="Section does not have audio"
        name="no_audio"
        checked={annotation.settings.no_audio}
        onChange={handleSettingsSelect}
      />
      <LabelDescription>
        {'Check if this is a text-only section'}
      </LabelDescription>
    </div>
  )
}

export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
  return (
    <div className='options'>
      <Select
        title='Color'
        name='color'
        selected={annotation.settings.color}
        options={CURTAIN_COLOR_SELECT_OPTIONS}
        defaultOption='Pick a color'
        onChange={handleSettingsSelect}
      />
      <Select
        title='Curtain style'
        name='transition_color'
        selected={annotation.settings.transition_color}
        options={CURTAIN_STYLE_SELECT_OPTIONS}
        defaultOption='Pick a style'
        onChange={handleSettingsSelect}
      />
      <AnnotationFormFullscreen
        annotation={annotation}
        handleSettingsChange={handleSettingsChange}
        handleSettingsSelect={handleSettingsSelect}
      />
    </div>
  )
}

export const AnnotationFormSubtitle = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
  return (
    <div className='options'>
      <Select
        title='Color'
        name='color'
        selected={annotation.settings.color}
        options={CURTAIN_COLOR_SELECT_OPTIONS}
        defaultOption='Pick a color'
        onChange={handleSettingsSelect}
      />

      <AnnotationFormFullscreen
        annotation={annotation}
        handleSettingsChange={handleSettingsChange}
        handleSettingsSelect={handleSettingsSelect}
      />
    </div>
  )
}

export const AnnotationFormFootnote = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
  return (
    <div className='options'>
      <TextInput
        title="Actual Timestamp"
        name="actual_ts"
        placeholder="0:00"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
    </div>
  )
}