import React, { Component } from 'react'
// import { Link } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { ReactSortable } from "react-sortablejs"

// import actions from '../../../actions'
import * as tileActions from '../../tile/tile.actions'
import * as pageActions from '../../page/page.actions'

const DOUBLE_CLICK_THRESHOLD = 250

class TileList extends Component {
  state = {
    tiles: [],
    lastTargetId: 0,
    lastTimeStamp: 0,
  }
  
  // store doubleclick state as a class property because ReactSortable calls setState promiscuously
  didDoubleClick = false

  componentDidMount(prevProps) {
    const { tiles } = this.props.page.show.res
    const { pages } = this.props.graph.show.res
    const pageTitles = pages.reduce((a,b) => {
      a[b.id] = b.title
      return a
    }, {})
    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.didDoubleClick) return
    const { tiles } = this.state
    if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
      this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
    }
    // since we store the full tiles here (reversed!), they might change from under us
    // potentially later refactor to only use a sort order / lookup
    else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
      const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
        a[b.id] = b
        return a
      }, {})
      const newTiles = this.state.tiles.map(tile => {
        return tileLookup[tile.id]
      })
      this.setState({ tiles: newTiles })
    }
  }

  handleChoose(e) {
    const { lastTargetId, lastTimeStamp } = this.state
    if (lastTimeStamp
      && parseInt(e.item.dataset.id) === lastTargetId
      && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
      ) {
      // console.log('selected', lastTargetId)
      this.didDoubleClick = true
      this.props.pageActions.showEditTileForm(lastTargetId)
    } else {
      this.setState({
        lastTargetId: parseInt(e.item.dataset.id),
        lastTimeStamp: e.timeStamp,
      })
    }
  }

  handleUpdate(newTiles) {
    if (this.didDoubleClick) return
    this.setState({ tiles: newTiles })
  }

  render() {
    const { tiles, pageTitles } = this.state
    return (
      <div className='box tileList'>
        <ReactSortable
          list={tiles}
          setList={newTiles => this.handleUpdate(newTiles)}
          onChoose={e => this.handleChoose(e)}
        >
          {tiles.map(tile => (
            tile.type === 'image'
            ? <TileListImage key={tile.id} tile={tile} />
            : tile.type === 'text'
            ? <TileListText key={tile.id} tile={tile} />
            : tile.type === 'link'
            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
            : <TileListMisc key={tile.id} tile={tile} />
          ))}
        </ReactSortable>
      </div>
    )
  }
}

const TileListImage = ({ tile }) => (
  <div className='row' data-id={tile.id}>
    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
  </div>
)

const TileListText = ({ tile }) => (
  <div className='row' data-id={tile.id}>
    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
  </div>
)

const TileListLink = ({ tile, pageTitles }) => (
  <div className='row link' data-id={tile.id}>
    <span className='snippet'>
      {'Link: '}
      {tile.target_page_id === -1
        ? 'External'
        : !tile.target_page_id
        ? 'No link specified!'
        : tile.target_page_id in pageTitles
        ? pageTitles[tile.target_page_id]
        : 'Error, broken link!'}
    </span>
  </div>
)

const TileListMisc = ({ tile }) => (
  <div className='row' data-id={tile.id}>
    <span className='snippet'>{"Tile: "}{tile.type}</span>
  </div>
)

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

const mapDispatchToProps = dispatch => ({
  tileActions: bindActionCreators({ ...tileActions }, dispatch),
  pageActions: bindActionCreators({ ...pageActions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(TileList)