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

import actions from 'app/actions'

import { Select } from 'app/common'

const thumbnailOptions = [
  { name: 'th', label: 'Thumbnails', },
  { name: 'sm', label: 'Small', },
  { name: 'md', label: 'Medium', },
  { name: 'lg', label: 'Large', },
  { name: 'orig', label: 'Original', },
]

const sortOptions = [
  { name: 'id-asc', label: 'Most recent' },
  { name: 'id-desc', label: 'Oldest first' },
  // { name: 'username-asc', label: 'Username (A-Z)' },
  // { name: 'username-desc', label: 'Username (Z-A)' },
  // { name: '-asc', label: '' },
  // { name: '-desc', label: '' },
  // { name: '-asc', label: '' },
  // { name: '-desc', label: '' },
  // { name: '-asc', label: '' },
  // { name: '-desc', label: '' },
]

class IndexOptions extends Component {
  render() {
    const { options } = this.props
    return (
      <div className='row menubar'>
        <div />
        <Select
          name={'sort'}
          options={sortOptions}
          selected={options.sort}
          onChange={actions.upload.updateOption}
        />
        <Select
          name={'thumbnailSize'}
          options={thumbnailOptions}
          selected={options.thumbnailSize}
          onChange={actions.upload.updateOption}
        />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  options: state.upload.options,
})

export default connect(mapStateToProps)(IndexOptions)