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

import './dashboard.css'

// import actions from 'app/actions'
import { Loader } from 'app/common'
import { groupResponseBy } from 'app/utils/api.utils'

class DashboardContainer extends Component {
  state = {
    ready: false,
    episodes: {},
    venues: {},
  }

  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.build()
  }
  
  componentDidUpdate(prevProps) {
    if (
      !this.state.ready ||
      (this.props.project !== prevProps.project) ||
      (this.props.episode !== prevProps.episode) ||
      (this.props.venue !== prevProps.venue)
    ) {
      this.build()
    }
  }

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

  render() {
    const { loading, projects } = this.props
    const { episodes, venues, ready } = this.state
    if (loading || !ready) {
      return (
        <div className='dashboard'>
          <Loader />
        </div>
      )
    }
    return (
      <div className='dashboard'>
        <div className='project-top'>
          <div className='row project-heading'>
            <div className='title'>
              <h1>Projects</h1>
            </div>
            <div className='links'>
              <Link to={`/project/new/`}>+ Add Project</Link>
            </div>
          </div>
        </div>
        {projects.order.map((project_id) => {
          const project = projects.lookup[project_id]
          console.log(project)
          return (
            <div className='project-entry' key={project.id}>
              <div className='row project-heading'>
                <div className='title'>
                  <h2>{project.title}</h2>
                  {project.is_live && <span className='published'>{"(published)"}</span>}
                </div>
                <div className='links'>
                  <Link to={`/project/${project.id}/new-episode/`}>+ Add Episode</Link>
                  <Link to={`/project/${project.id}/venues/`}>Venues</Link>
                  <Link to={`/project/${project.id}/edit/`}>Settings</Link>
                </div>
              </div>
              {(episodes[project.id] || []).map(episode => (
                <div className='episode-entry' key={episode.id}>
                  <div className='row'>
                    <div className='title'>
                      <Link to={`/editor/${episode.id}/viewer/`}>
                        {'Episode #' + episode.episode_number}
                      </Link>
                      {episode.is_live && <span className='published'>{"(published)"}</span>}
                    </div>
                    <div className='links'>
                      <Link to={`/editor/${episode.id}/viewer/`}>Viewer</Link>
                      <Link to={`/editor/${episode.id}/timeline/`}>Timeline</Link>
                      <Link to={`/editor/${episode.id}/transcript/`}>Transcript</Link>
                      <Link to={`/episode/${episode.id}/edit/`}>Settings</Link>
                    </div>
                  </div>
                  <div className='row'>
                    <div className='title'>
                      <i>{episode.title}</i>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )
        })}
      </div>
    )
  }
}

const mapStateToProps = state => ({
  loading: (
    !state.project.index.lookup ||
    !state.episode.index.lookup ||
    !state.venue.index.lookup ||
    state.project.index.loading ||
    state.episode.index.loading ||
    state.venue.index.loading
  ),
  projects: state.project.index,
  episodes: state.episode.index,
  venues: state.venue.index,
})

export default connect(mapStateToProps)(DashboardContainer)