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, timestampHMS } from 'app/utils'

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

  constructor(props) {
    super(props)
  }

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

  build() {
    const { annotation } = this.props
    const stats = annotation.order.reduce((stats, annotation_id) => {
      const { paragraph_id, type } = annotation.lookup[annotation_id]
      if (paragraph_id) {
        stats.paragraphs[paragraph_id] = true
      }
      if (!stats.types[type]) {
        stats.types[type] = 0
      }
      stats.types[type] += 1
      return stats
    }, { types: {}, paragraphs: {} })
    setTimeout(() => {
      this.setState({ ready: true, stats })
    }, 20)
  }

  render() {
    const { project, episode, media, annotation, align, viewer } = this.props
    const { ready, stats } = this.state
    if (!ready) {
      return (
        <div className='overview'>
          <Loader />
        </div>
      )
    }

    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>
          <TableObject
            tag="Overview"
            order={"annotations".split(" ")}
            object={{
              annotations: courtesyS(annotation.order.length, 'annotation'),
              media: media.order.length + ' media',
              sections: courtesyS(viewer.sections.length, 'section'),
              paragraphs: courtesyS(Object.keys(stats.paragraphs).length, 'paragraph'),
              duration: timestampHMS(align.duration),
            }}
          />
          <TableObject
            tag="Annotations"
            object={stats.types}
          />
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(OverviewContainer)

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