import React from 'react'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'

const styles = {
  centerText: {
    textAlign: 'center'
  },
  buttonCSS: {
    marginLeft: '50%'
  }
}

const ItemTypeV = (props) => {
  return (
    <form onSubmit={props.submit}>
      <div className='row'>
        <div className='col-md-6'>
          <div className={`dropdown ${props.classes.centerText}`}>
            <select onChange={props.onChangeType}>
              <option value='default'>Select a Type</option>
              { props.types.map((item, i) => {
                return <option value={item}>{item}</option>
              })}
            </select>
          </div>
        </div>
        <div className='col-md-6'>
          <div className={`dropdown ${props.classes.centerText}`}>
            <select onChange={props.onChangeSubtype}>
              <option value='default'>Select a Subtype</option>
              {props.subtypes[props.currentType].map((item, i) => {
                return <option value={item}>{item}</option>
              })}
            </select>
          </div>
        </div>
        <div className={`col-md-12 ${props.classes.centerText}`}>
          <button type='submit' className={`btn btn-primary`}>Submit</button>
        </div>
      </div>
    </form>
  )
}

ItemTypeV.propTypes = {
  types: PropTypes.array,
  subtypes: PropTypes.object,
  currentType: PropTypes.string,
  onChangeType: PropTypes.func,
  onChangeSubtype: PropTypes.func,
  submit: PropTypes.func,
  classes: PropTypes.object
}

export default injectSheet(styles)(ItemTypeV)
