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

import { Select } from 'app/common'
import { unslugify } from 'app/utils'

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

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

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

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

  handleChange(name, value) {
    this.props.onChange(name, parseInt(value))
  }

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

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

export default connect(mapStateToProps)(AudioSelect)