import React, {Component, PropTypes} from 'react'
import Dropdown from 'src/shared/components/Dropdown'

import {QUERY_FILL_OPTIONS} from 'src/shared/constants/queryFillOptions'

class FillQuery extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selected: QUERY_FILL_OPTIONS[0],
      useCustomNumber: false,
      customNumber: null,
      inputValue: '0',
    }

    this.handleDropdown = ::this.handleDropdown
    this.handleInputBlur = ::this.handleInputBlur
    this.handleInputChange = ::this.handleInputChange
    this.handleKeyUp = ::this.handleKeyUp
  }

  static defaultProps = {
    size: 'xs',
  }

  handleInputBlur(e) {
    const {useCustomNumber, inputValue} = this.state
    // Prevent user from submitting an empty string as their value
    // Use 0 by default
    if (e.target.value === '') {
      this.setState({inputValue: '0'})
    }
    if (useCustomNumber) {
      this.props.onSelection(inputValue)
    }
  }

  handleInputChange(e) {
    this.setState({inputValue: e.target.value})
  }

  handleDropdown(item) {
    if (item.text === 'number') {
      this.setState({selected: item.text, useCustomNumber: true}, () => {
        this.props.onSelection(this.state.inputValue)
      })
    } else {
      this.setState({selected: item.text, useCustomNumber: false}, () => {
        this.props.onSelection(item.text)
      })
    }
  }

  handleKeyUp(e) {
    if (e.key === 'Enter' || e.key === 'Escape') {
      e.target.blur()
    }
  }

  render() {
    const {size} = this.props
    const {selected, useCustomNumber, inputValue} = this.state
    const items = QUERY_FILL_OPTIONS.map(text => ({text}))

    return (
      <div className={`fill-query fill-query--${size}`}>
        <label>Fill missing with</label>
        <Dropdown
          selected={selected}
          items={items}
          className="fill-query--dropdown"
          buttonSize={`btn-${size}`}
          buttonColor="btn-default"
          onChoose={this.handleDropdown}
        />
        {useCustomNumber
          ? <input
              type="number"
              className={`form-control monotype form-plutonium input-${size} fill-query--input`}
              placeholder="Custom Value"
              autoFocus={true}
              value={inputValue}
              onKeyUp={this.handleKeyUp}
              onChange={this.handleInputChange}
              onBlur={this.handleInputBlur}
            />
          : null}
      </div>
    )
  }
}

const {func, string} = PropTypes

FillQuery.propTypes = {
  onSelection: func.isRequired,
  size: string,
}

export default FillQuery

@@ -633,20 +633,39 @@
 : 'xs',%0A
+    theme: 'blue',%0A
   %7D%0A
-
 %0A  handl
@@ -1536,16 +1536,23 @@
 st %7Bsize
+, theme
 %7D = this
@@ -1681,16 +1681,368 @@
 ext%7D))%0A%0A
+    let inputTheme = ''%0A    let dropdownTheme = ''%0A%0A    if (theme === 'blue') %7B%0A      inputTheme = 'form-plutonium'%0A    %7D%0A    if (theme === 'green') %7B%0A      inputTheme = 'form-malachite'%0A      dropdownTheme = 'dropdown-malachite'%0A    %7D%0A    if (theme === 'purple') %7B%0A      inputTheme = 'form-astronaut'%0A      dropdownTheme = 'dropdown-astronaut'%0A    %7D%0A%0A
     retu
@@ -2332,16 +2332,52 @@
 efault%22%0A
+          menuClass=%7BdropdownTheme%7D%0A
         
@@ -2540,30 +2540,29 @@
 onotype 
-form-plutonium
+$%7BinputTheme%7D
  input-$
@@ -2975,16 +2975,16 @@
 quired,%0A
-
   size: 
@@ -2991,16 +2991,33 @@
 string,%0A
+  theme: string,%0A
 %7D%0A%0Aexpor

Add theme prop to FillQuery