import React, { Component } from 'react'
// import { Link } from 'react-router-dom'
import { connect } from 'react-redux'

import actions from 'app/actions'

import { timestamp, capitalize } from 'app/utils'
import { Select, Checkbox } from 'app/common'

const PARAGRAPH_TYPES = [
  'paragraph', 'intro_paragraph', 'blockquote', 'pullquote', 'big_text', 'hidden',
].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))

class ParagraphForm extends Component {
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  componentDidMount() {
    if (this.textareaRef && this.textareaRef.current) {
      this.textareaRef.current.focus()
    }
  }
  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }
  handleSelect(name, value) {
    const { onUpdate, paragraph } = this.props
    onUpdate({
      ...paragraph,
      [name]: value,
    })
  }
  handleSettingsSelect(name, value) {
    const { onUpdate, paragraph } = this.props
    onUpdate({
      ...paragraph,
      settings: {
        ...paragraph.settings,
        [name]: value,
      }
    })
  }
  handleSubmit() {
    const { paragraph, onClose } = this.props
    actions.paragraph.update(paragraph)
      .then(response => {
        console.log(response)
        onClose()
      })
  }
  render() {
    const { paragraph, y } = this.props
    console.log(paragraph)
    return (
      <div
        className='paragraphForm'
        style={{
          top: y,
        }}
      >
        {this.renderButtons()}
        <div>
          <Checkbox
            label="Hide in transcript"
            name="hide_in_transcript"
            checked={paragraph.settings ? paragraph.settings.hide_in_transcript : false}
            onChange={this.handleSettingsSelect}
          />
        </div>
      </div>
    )
  }
  renderButtons() {
    const { paragraph } = this.props
    return (
      <div className='row buttons'>
        <div className='row'>
          <Select
            name='type'
            selected={paragraph.type}
            options={PARAGRAPH_TYPES}
            defaultOption='text'
            onChange={this.handleSelect}
          />
          <div className='ts'>{timestamp(paragraph.start_ts, 1, true)}</div>
        </div>
        <div>
          <button onClick={this.handleSubmit}>Save</button>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
})

export default connect(mapStateToProps)(ParagraphForm)