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

import actions from 'app/actions'

class Timeline extends Component {
  state = {
    visible: false,
  }
  constructor(props){
    super(props)
  }
  render() {
    if (this.props.text.loading) return <div />
    if (!this.state.visible) {
      return (
        <div className='script'>
          <button onClick={() => this.setState({ visible: true })}>
            +
          </button>
        </div>
      )
    }
    return (
      <div className='script'>
        <textarea 
          className='script'
          onChange={e => actions.site.updateText(e.target.value)}
          value={this.props.text}
        />
        <button onClick={() => this.setState({ visible: false })}>
          x
        </button>
      </div>
    )
  }
}


const mapStateToProps = state => ({
  text: state.site.text,
})

const mapDispatchToProps = dispatch => ({
  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(Timeline)