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

import { history } from 'site/store'
import actions from 'site/actions'
import { Loader } from 'app/common/loader.component'
import TileHandle from 'app/views/tile/components/tile.handle'

import 'app/views/page/page.css'

class ViewerContainer extends Component {
  state = {
    page: {},
    bounds: { width: window.innerWidth, height: window.innerHeight },
    roadblock: false,
    popups: {},
  }

  constructor(props) {
    super(props)
    this.pageRef = React.createRef()
    this.handleMouseDown = this.handleMouseDown.bind(this)
    this.handleResize = this.handleResize.bind(this)
    this.removeRoadblock = this.removeRoadblock.bind(this)
    window.addEventListener('resize', this.handleResize)
  }

  componentDidUpdate(prevProps) {
    // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname)
    if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) {
      this.load()
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
    actions.site.interact()
  }

  load() {
    const { graph_name, page_name } = this.props.match.params
    const page_path = ["", graph_name, page_name].join('/')
    const { pages, home_page } = this.props.graph
    const page = pages[page_path] || pages[home_page]
    if (!this.props.interactive && hasAutoplay(page)) {
      this.setState({ page, popups: {}, roadblock: true })
    } else {
      this.setState({ page, popups: {}, roadblock: false })
      actions.site.interact()
      this.props.audio.player.playPage(page)
    }
  }

  handleResize() {
    this.setState({
      bounds: {
        width: window.innerWidth,
        height: window.innerHeight,
      }
    })
  }

  handleMouseDown(e, tile) {
    if (tile.href) {
      if (tile.href.indexOf('http') === 0) {
        window.location.href = tile.href
        return
      }
      else if (tile.href === '__open_popup') {
        this.setState({
          popups: {
            ...this.state.popups,
            [tile.settings.target_popup]: true,
          }
        })
      }
      else if (tile.href === '__close_popup') {
        this.setState({
          popups: {
            ...this.state.popups,
            [tile.settings.target_popup]: false,
          }
        })
      }
      else if (!tile.settings.navigate_when_audio_finishes) {
        history.push(tile.href)
      }
    }
    if (tile.settings.audio_on_click_id > 0) {
      this.props.audio.player.playTile({
        type: "click",
        tile,
      })
    }
  }

  handlePlaybackEnded(tile) {
    if (tile.href && tile.settings.autoadvance) {
      history.push(tile.href)
    }
  }

  render() {
    const { page, audio, popups } = this.state
    if (this.state.roadblock) {
      return this.renderRoadblock()
    }
    if (this.props.graph.loading || !page.id) {
      return (
        <div>
          <div className='body'>
            <div className='page loading'>
              <Loader />
            </div>
          </div>
        </div>
      )
    }
    const { settings } = page
    const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
    const videoBounds = (page.tiles.length && page.tiles[0].type === 'video') ? {
      width: page.tiles[0].settings.width,
      height: page.tiles[0].settings.height,
    } : this.state.bounds
    // console.log(page)
    return (
      <div className='body'>
        <div className='page' ref={this.pageRef} style={pageStyle}>
          {page.tiles.map(tile => {
            if (tile.settings.is_popup && !popups[tile.settings.popup_group]) return
            return (
              <TileHandle
                viewing
                key={tile.id}
                tile={tile}
                audio={audio}
                bounds={this.state.bounds}
                videoBounds={videoBounds}
                onMouseDown={e => this.handleMouseDown(e, tile)}
                onPlaybackEnded={e => this.handlePlaybackEnded(e, tile)}
                onDoubleClick={e => {}}
              />
            )
          })}
        </div>
      </div>
    )
  }

  removeRoadblock() {
    console.log("remove roadblock")
    actions.site.interact()
    this.setState({ roadblock: false })
    this.props.audio.player.playPage(this.state.page)
  }
  
  renderRoadblock() {
    const { title } = this.props.graph
    return (
      <div className='roadblock' onClick={this.removeRoadblock}>
        <div>
          <h2>{title}</h2>
          <button>Enter</button>
        </div>
      </div>
    )
  }
}

const hasAutoplay = page => {
  const hasAutoplayVideo = page.tiles.some(tile => {
    return tile.type === 'video' && !tile.settings.muted
  })
  const hasAutoplayAudio = page.settings.background_audio_id > 0
  return hasAutoplayAudio || hasAutoplayVideo
}

const mapStateToProps = state => ({
  site: state.site,
  audio: state.audio,
  graph: state.site.graph,
  interactive: state.site.interactive,
})

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(ViewerContainer)