import React from 'react'
import DemoEditSecondary from './DemoEditSecondary'

class DemoEditPrimary extends React.Component {
  constructor () {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange (event) {
    const { actions } = this.props
    const { id, name, value } = event.target
    const passedValue = (name === 'active') ? (value === 'active') : value
    actions.updatePrimary(id, {[name]: passedValue})
  }

  handleSubmit (event) {
    event.preventDefault()
    // Save values in database.
  }

  render () {
    const { primary } = this.props
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type='text' id={primary.id} name='name' ref={input => { this.name = input }} value={primary.name} onChange={this.handleChange} />
          <select id={primary.id} name='active' ref={input => { this.active = input }} value={primary.active ? 'active' : 'inactive'} onChange={this.handleChange}>
            <option value='active'>active</option>
            <option value='inactive'>inactive</option>
          </select>
          <button type='submit'>Save</button>
        </form>
        {primary.secondary.map((secondary, key) => (
          <DemoEditSecondary key={key} primaryKey={primary.id} secondary={secondary} updateSecondary={this.props.actions.updateSecondary} />
        ))}
      </div>
    )
  }
}

export default DemoEditPrimary