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

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

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

class ViewerContainer extends Component {
  state = {
    page: {},
  }

  constructor(props) {
    super(props)
    this.pageRef = React.createRef()
    this.handleMouseDown = this.handleMouseDown.bind(this)
  }

  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()
    }
  }

  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]
    if (!page) {
      // console.log('-> home page')
      console.log(page_path)
      const { home_page } = this.props.graph
      this.setState({ page: pages[home_page] })
    } else {
      // console.log(page)
      console.log(page_path)
      this.setState({ page })
    }
  }

  handleMouseDown(e, tile) {
    // console.log(tile)
  }

  render() {
    const { page } = this.state
    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' }
    // console.log(page)
    return (
      <div className='body'>
        <div className='page' ref={this.pageRef} style={pageStyle}>
          {page.tiles.map(tile => {
            return (
              <TileHandle
                viewing
                key={tile.id}
                tile={tile}
                bounds={this.state.bounds}
                onMouseDown={e => this.handleMouseDown(e, tile)}
                onDoubleClick={e => {}}
              />
            )
          })}
        </div>
      </div>
    )
  }
}

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

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(ViewerContainer)