import React, { Component } from 'react'
import { connect } from 'react-redux'

import './align.css'
import './sidebar.css'

import Timeline from './containers/timeline.container.js'
import Sidebar from './containers/sidebar.container.js'

class Container extends Component {
  componentDidMount() {
    document.body.scrollTo(0, 0)
    document.body.parentNode.scrollTo(0, 0)
  }
  render() {
    return (
      <div className='body alignmentEditor'>
        <div className='row'>
          {this.props.peaks.length
            ? <Timeline />
            : <div className="overview">No audio file loaded</div>}
        </div>
        <Sidebar />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  peaks: state.align.peaks,
})

export default connect(mapStateToProps)(Container)