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

import './sidebar.css'

import actions from 'app/actions'

import Script from './components/script.component.js'
import TableOfContents from './components/tableOfContents.component.js'
import WaveUpload from './components/waveUpload.component.js'

class Sidebar extends Component {
  state = {
    mode: "toc",
  }
  componentDidMount(){
    if (!this.props.peaks.length) {
      this.setState({ mode: "wav" })
    }
  }

  render() {
    const { mode } = this.state
    return (
      <div className='sidebar'>
        <div className='buttons'>
          <button className={mode === "txt" ? "active" : ""} onClick={() => this.setState({ mode: "txt" })}>text</button>
          <button className={mode === "wav" ? "active" : ""} onClick={() => this.setState({ mode: "wav" })}>wav</button>
          <button className={mode === "toc" ? "active" : ""} onClick={() => this.setState({ mode: "toc" })}>contents</button>
        </div>
        {mode === 'toc' && <TableOfContents />}
        {mode === 'txt' && <Script />}
        {mode === 'wav' && <WaveUpload />}
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(Sidebar)