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

import { Select } from 'app/common'

const NO_AUDIO = 0
const AUDIO_TOP_OPTIONS = [
  { name: NO_AUDIO, label: 'No Audio' },
  { name: -2, label: '──────────', disabled: true },
]

class AudioSelect extends Component {
  state = {
    audioList: []
  }

  constructor(props) {
    super(props)
    this.handleSelect = this.handleSelect.bind(this)
  }

  componentDidMount(){
    const { uploads } = this.props.graph.show.res
    const audioUploads = uploads
      .filter(upload => upload.tag === 'audio')
      .map(page => ({ name: upload.id, label: page.path }))
    let audioList = [
      ...AUDIO_TOP_OPTIONS,
      ...audioUploads,
    ]
    this.setState({
      audioList,
    })
  }

  render() {
    return (
      <Select
        title={this.props.title || "Audio"}
        name={this.props.name}
        selected={this.props.selected || NO_AUDIO}
        options={this.state.audioList}
        onChange={this.props.onChange}
      />
    )
  }
}

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

export default connect(mapStateToProps)(AudioSelect)