import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { toArray } from '../util'

const parseTypes = {
  string: s => s.toLowerCase(),
  number: s => parseInt((s || '0').replace(/,/g, '').trim()),
}

const sortTypes = {
  string: (a,b) => a[0].localeCompare(b[0]),
  number: (a,b) => a[0] - b[0],
}

const sortOptions = [
  { field: 'title', title: 'Name', type: 'string' },
  { field: 'year', title: 'Year', type: 'number' },
  { field: 'purpose', title: 'Purpose', type: 'string' },
  // { field: 'images', title: 'Images', type: 'number', reversed: true },
]

class DatasetListContainer extends Component {
  state = {
    sort: sortOptions[0],
    reversed: false,
    displayField: 'year',
  }

  constructor(){
    super()
    const parent = document.querySelector('.dataset-intro .dataset-list')
    this.parent = parent
    this.els = toArray(parent.children)
  }

  sortBy(order){
    let { sort, reversed, displayField } = this.state
    if (sort === order) reversed = !reversed
    else reversed = !!order.reversed
    const parseFn = parseTypes[order.type]
    const sortFn = sortTypes[order.type]
    let els = this.els
      .map(el => [
        parseFn(el.querySelector('.' + order.field).innerText),
        el,
      ])
      .sort(sortFn)
      // .map(pair => pair[1])
    // console.log(els)
    els = els.map(pair => pair[1])
    if (reversed) els.reverse()
    if (order.field === 'title') {
      // displayField = 'year'
    } else {
      displayField = order.field
    }
    els.forEach(el => {
      this.parent.removeChild(el)
      this.parent.appendChild(el)
      const viz = el.querySelector('.visible')
      if (viz) {
        viz.classList.remove('visible')
      }
      el.querySelector('.' + displayField).classList.add('visible')
    })
    this.setState({ sort: order, reversed, displayField })
  }

  render() {
    const { payload } = this.props
    // console.log(payload)
    return (
      <div className='dataset-list'>
        <ul className='sort-options'>
          {sortOptions.map(order =>
            <li
              key={order.field}
              className={order.field === this.state.sort.field ? 'active' : ''}
              onClick={() => this.sortBy(order)}>
              {order.title}
            </li>
          )}
        </ul>
      </div>
    )
  }
}


export default DatasetListContainer