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

import './overview.css'

// import actions from 'app/actions'
import { Loader, TableObject } from 'app/common'
import { groupResponseBy } from 'app/utils/api.utils'
import { courtesyS, formatDateTime } from 'app/utils'

class OverviewContainer extends Component {
  state = {
    ready: true,
  }

  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.build()
  }
  
  componentDidUpdate(prevProps) {
    if (!this.state.ready) {
      this.build()
    }
  }

  build() {
    // const episodes = groupResponseBy(this.props.episodes, 'project_id')
    // const venues = groupResponseBy(this.props.venues, 'project_id')
    // this.setState({ ready: true, episodes, venues })
  }

  render() {
    const { project, episode, media, annotation, align } = this.props
    const { ready } = this.state
    if (!ready) {
      return (
        <div className='overview'>
          <Loader />
        </div>
      )
    }
    // console.log(this.props)
    console.log(annotation.order.length)
    return (
      <div className='overview'>
        <div className='project-top'>
          <div className='project-heading'>
            <h1>{`${project.title}: Episode ${episode.episode_number}`}</h1>
            <h2>{episode.title}</h2>
          </div>
          <h3>Statistics</h3>

          <TableObject
            className="overview"
            order={"annotations".split(" ")}
            object={{
              annotations: courtesyS(annotation.order.length, 'annotation'),
            }}
          />
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  project: state.site.project,
  episode: state.site.episode,
  media: state.media.index,
  annotation: state.annotation.index,
  align: state.align,
})

export default connect(mapStateToProps)(OverviewContainer)

/*
  last_updated: formatDateTime(dataset.last_updated),
 */