import React, { Component } from 'react'

import { CURTAIN_COLOR_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 AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
  if (!media.lookup) return <div />
  const video_list_items = makeMediaItems(media, ['video'])
  return (
    <div className='options'>
      <Select
        name='media_id'
        className="media_id"
        selected={annotation.settings.media_id}
        options={video_list_items}
        defaultOption='Choose a video'
        onChange={handleSettingsSelect}
      />
      <Checkbox
        label="Autoplay"
        name="autoplay"
        checked={annotation.settings.autoplay}
        onChange={handleSettingsSelect}
      />
      <Checkbox
        label="Fullscreen"
        name="fullscreen"
        checked={annotation.settings.fullscreen}
        onChange={handleSettingsSelect}
      />
      <Checkbox
        label="Inline"
        name="inline"
        checked={annotation.settings.inline}
        onChange={handleSettingsSelect}
      />
      <Checkbox
        label="Loop"
        name="loop"
        checked={annotation.settings.loop}
        onChange={handleSettingsSelect}
      />
      <Checkbox
        label="Unmute"
        name="unmuted"
        checked={annotation.settings.unmuted}
        onChange={handleSettingsSelect}
      />
      {annotation.settings.inline && (
        <Checkbox
          label="Hide Controls"
          name="hide_controls"
          checked={annotation.settings.hide_controls}
          onChange={handleSettingsSelect}
        />
      )}
      {annotation.settings.inline && (
        <Checkbox
          label="Show poster image"
          name="poster"
          checked={annotation.settings.poster}
          onChange={handleSettingsSelect}
        />
      )}
      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
        <Checkbox
          label="Hide inline video poster"
          name="hide_poster_inline"
          checked={annotation.settings.hide_poster_inline}
          onChange={handleSettingsSelect}
        />
      )}
      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
        <Checkbox
          label="Can play full video at end of section"
          name="can_play_full_video"
          checked={annotation.settings.can_play_full_video}
          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='Poster Size'
        name='poster_size'
        selected={annotation.settings.poster_size}
        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
        defaultOption='Select size'
        onChange={handleSettingsSelect}
      />
      <Select
        title='Poster background color'
        name='poster_background_color'
        selected={annotation.settings.poster_background_color}
        options={CURTAIN_COLOR_SELECT_OPTIONS}
        defaultOption='Pick a color'
        onChange={handleSettingsSelect}
      />
      <TextInput
        title="Video start time"
        name="video_start_ts"
        className="number"
        placeholder="0:00"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
      <LabelDescription>
        {'Auto-advances the video to this point when starting'}
      </LabelDescription>

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

export const AnnotationFormVideoSetVolume = ({ annotation, handleSettingsChange }) => {
  return (
    <div className='options'>
      <TextInput
        title="Volume"
        name="volume"
        className="number"
        placeholder="1.0"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
      <TextInput
        title="Fade Time"
        name="duration"
        className="number"
        placeholder="0:01"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
    </div>
  )
}