import React, { Component } from 'react'

import { timestamp } from 'app/utils'
import { TextInput, LabelDescription, Select, Checkbox } from 'app/common'
import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS } from 'app/constants'
import { annotationFadeTimings } from 'app/utils/annotation.utils'
import { makeMediaItems } from 'app/utils/annotation.utils'

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

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

      <TextInput
        title="Subtitle"
        name="subtitle"
        placeholder="Enter subtitle or leave blank"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />

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

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

      <LabelDescription>
        {'Timestamp where voiceover starts, after any intro sound effect.'}
      </LabelDescription>

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

export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
  return (
    <div className='options'>
      <TextInput
        title="Curtain text"
        name="curtain_text"
        placeholder="Enter text or leave blank"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />

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

      <Select
        title='Style'
        name='curtain_style'
        selected={annotation.settings.curtain_style}
        options={CURTAIN_STYLE_SELECT_OPTIONS}
        defaultOption='Pick a style'
        onChange={handleSettingsSelect}
      />

      <Checkbox
        label="Contains flashing light"
        name="flashing_light_warning"
        checked={annotation.settings.flashing_light_warning}
        onChange={handleSettingsSelect}
      />

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

export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
  const {
    fadeInDuration, fadeOutDuration, duration,
    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
  } = annotationFadeTimings(annotation)
  return (
    <div>
      <TextInput
        title="Total duration"
        name="duration"
        className="number"
        placeholder="0:00"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
      <LabelDescription>
        {duration}
        {' seconds, ends at '}
        {timestamp(end_ts)}
      </LabelDescription>

      <TextInput
        title="Fade in duration"
        name="fade_in_duration"
        className="number"
        placeholder="0:00"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
      <LabelDescription>
        {fadeInDuration}
        {' seconds, ends at '}
        {timestamp(fade_in_end_ts)}
      </LabelDescription>

      <TextInput
        title="Fade out duration"
        name="fade_out_duration"
        className="number"
        placeholder="0:00"
        data={annotation.settings}
        onChange={handleSettingsChange}
        autoComplete="off"
      />
      <LabelDescription>
        {fadeOutDuration}
        {' seconds, starts at '}
        {timestamp(fade_out_start_ts)}
      </LabelDescription>
    </div>
  )
}