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

import './viewer.fonts.css'
import './viewer.css'
import './nav/nav.css'
import './nav/eflux.css'
import './sections/sections.css'
import './sections/share.css'
import './sections/subscribe.css'
import './sections/footnotes.css'
import './transcript/transcript.css'
import './checklist/checklist.css'
import './checklist/credits.css'
import './modals/modals.vitrine.css'
import './modals/modals.handheld.css'
import './modals/modals.video.css'
import './forms/forms.css'
import './player/player.container.css'
import './player/player.fullscreen.css'
import './player/player.transcript.css'
import './player/components.media/media.css'
import './viewer.mobile.css'

import { Loader } from 'app/common/loader.component'
import { ENV_DEVELOPMENT } from 'app/constants'
import { isHandheld } from 'app/utils'

import NavParent from './nav/nav.parent'
import ViewerSections from './sections/viewer.sections'
import ViewerRouter from './nav/viewer.router'
import EfluxChrome from './nav/eflux.chrome'
import Player from './player/player.container'
import Transcript from './transcript/transcript.container'
import Checklist from './checklist/checklist.container'
import VitrineModal from './modals/modals.vitrine'
import HandheldModal from './modals/modals.handheld'

class ViewerContainer extends Component {
  render() {
    const { loaded, viewer, playing } = this.props
    // console.log(loaded, playing, viewer)
    if (!loaded) {
      return <div className='viewer loading'><Loader /></div>
    }
    let className = 'viewer'
    if (playing) {
      className += ' audio-playing'
    } else {
      className += ' audio-paused'
    }
    if (viewer.atEndOfSection) {
      className += ' section-end'
    }
    if (viewer.videoModal.open) {
      className += ' video-modal-open'
    }
    if (viewer.checklist || viewer.credits) {
      className += ' checklist-open'
    } else {
      if (viewer.transcript) className += ' transcript-open'
      if (viewer.nav) className += ' nav-open'
    }
    if (viewer.share) {
      className += ' share-open'
    } else if (viewer.subscribe) {
      className += ' subscribe-open'
    } else if (viewer.footnotes) {
      className += ' footnotes-open'
    }
    if (viewer.onlyEnableFirstSection) {
      className += ' first-section-only'
    }
    return (
      <div>
        <div className='viewer-parent'>
          <EfluxChrome />
          <div className={className}>
            <Player />
            <NavParent />
            <ViewerSections />
            <Transcript />
            <Checklist />
            {ENV_DEVELOPMENT && <Route exact path='/viewer/:component/' component={ViewerRouter} />}
          </div>
          <VitrineModal />
          {isHandheld && <HandheldModal />}
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  loaded: (
    !!state.annotation.index.lookup &&
    !!state.paragraph.index.lookup &&
    !!state.media.index.lookup &&
    !!state.viewer.sections.length
  ),
  playing: state.audio.playing,
  viewer: state.viewer,
})

export default connect(mapStateToProps)(ViewerContainer)