import React from 'react'

import {
  TextInput, Slider,
  Select, Checkbox,
} from 'app/common'

import { VIDEO_STYLES } from './tile.constants'

export default function TileVideoForm({ tile, errorFields, parent }) {
  return (
    <div>
      <div className='row imageUrl'>
        <TextInput
          title=""
          placeholder='http://'
          name="url"
          required
          data={tile.settings}
          error={errorFields.has('url')}
          onChange={parent.handleVideoChange}
          autoComplete="off"
        />
      </div>
      <div className='row pair with_checkbox'>
        <Select
          name='video_style'
          selected={tile.settings.video_style || 'none'}
          options={VIDEO_STYLES}
          title=''
          onChange={parent.handleSettingsSelect}
        />
        <Checkbox
          label="Loop"
          name="loop"
          checked={tile.settings.loop}
          onChange={parent.handleSettingsSelect}
          autoComplete="off"
        />
      </div>
      <div className='row pair'>
        <Checkbox
          label="Muted"
          name="muted"
          className='short'
          checked={tile.settings.muted}
          onChange={parent.handleSettingsSelect}
        />
        <Checkbox
          label="Autoadvance"
          name="autoadvance"
          className='short'
          checked={tile.settings.autoadvance}
          onChange={parent.handleSettingsSelect}
        />
      </div>
      {!tile.settings.muted && (
        <Slider
          title='Volume'
          name='volume'
          value={('volume' in tile.settings) ? tile.settings.volume : 1.0}
          onChange={parent.handleSettingsSelect}
          min={0.0}
          max={1.0}
          step={0.01}
        />
      )}
      {tile.settings.loop && (
        <div className='row'>
          <Checkbox
            label="Loop section?"
            className='short'
            name="loop_section"
            checked={tile.settings.loop_section}
            onChange={parent.handleSettingsSelect}
          />
        </div>
      )}
      {tile.settings.loop && tile.settings.loop_section && (
        <div className='row pair'>
          <TextInput
            title="From"
            placeholder='0:00'
            name="loop_start"
            data={tile.settings}
            onChange={parent.handleSettingsChange}
            autoComplete="off"
          />
          <TextInput
            title="To"
            placeholder='0:00'
            name="loop_end"
            data={tile.settings}
            onChange={parent.handleSettingsChange}
            autoComplete="off"
          />
        </div>
      )}
    </div>
  )
}