import React, { PropTypes, Component } from 'react'

import {
  MAIN_BRICK,
  TEST_INPUT
} from '../utils/componentNames'

import {
  PositionPropTypes,
  PrimitivePropTypes
} from '../propTypes'

const baseStyles = {
  backgroundColor: 'rgba(0, 0, 255, 0.5)',
  padding: 6,
  position: 'absolute'
}

const translations = {
  en: {
    addUnitTest: 'Add unit test',
    delete: 'Delete',
    empty: 'None',
    type: 'Type: ',
    value: 'Value: '
  }
}

export default class SelectedElementDialog extends Component {
  constructor(props) {
    super(props)

    this.renderElementDetails = this.renderElementDetails.bind(this)
  }

  renderElementDetails() {
    const {
      componentName,
      id
    } = this.props

    switch (componentName) {
      case MAIN_BRICK:
        const {
          addUnitTest
        } = this.props

        return (
          <button
            onClick={ addUnitTest }
          >
            { translations['en'].addUnitTest }
          </button>
        )
      case TEST_INPUT:
        const {
          changePrimitiveType,
          changePrimitiveValue,
          primitives,
          type,
          value
        } = this.props

        return (
          <div>
            <div>
              <label>
                { translations['en'].type }
              </label>
              <select
                value={ type }
                onChange={ (e) => changePrimitiveType(id, e) }
              >
                { /* TestInput 'type' will be 'null' by default */ }
                <option
                  disabled
                  value="null"
                >
                  { translations['en'].empty }
                </option>

                { primitives.map((primitive) =>
                    <option
                      key={ primitive.id }
                      value={ primitive.type }
                    >
                      { primitive.label }
                    </option>
                ) }
              </select>
            </div>
            <div>
              <label>
                { translations['en'].value }
              </label>
              <input
                value={ value }
                onChange={ (e) => changePrimitiveValue(id, e) }
              />
            </div>
          </div>
        )
      default:
        const {
          deleteElement
        } = this.props

        return (
          <button
            onClick={ () => deleteElement(id) }
          >
            { translations['en'].delete }
          </button>
        )
    }
  }

  render() {
    const {
      mousePosition
    } = this.props

    const styles = Object.assign({}, baseStyles, {
      left: mousePosition.x,
      top: mousePosition.y
    })

    return (
      <div style={ styles }>
        { this.renderElementDetails() }
      </div>
    )
  }
}

SelectedElementDialog.propTypes = {
  addUnitTest: PropTypes.func.isRequired,
  changePrimitiveType: PropTypes.func.isRequired,
  changePrimitiveValue: PropTypes.func.isRequired,
  componentName: PropTypes.string.isRequired,
  deleteElement: PropTypes.func.isRequired,
  id: PropTypes.number.isRequired,
  mousePosition: PositionPropTypes.isRequired,
  primitives: PropTypes.arrayOf(PrimitivePropTypes).isRequired
}

@@ -69,16 +69,29 @@
 _BRICK,%0A
+  PRIMITIVE,%0A
   TEST_I
@@ -584,50 +584,208 @@
 nder
-ElementDetails = this.renderElementDetails
+DeleteElementButton = this.renderDeleteElementButton.bind(this)%0A    this.renderElementDetails = this.renderElementDetails.bind(this)%0A    this.renderPrimitiveValueInput = this.renderPrimitiveValueInput
 .bin
@@ -1175,118 +1175,241 @@
 ase 
-TEST_INPUT:%0A        const %7B%0A          changePrimitiveType,%0A          changePrimitiveValue,%0A          p
+PRIMITIVE:%0A        return (%0A          %3Cdiv%3E%0A            %7B this.renderPrimitiveValueInput() %7D%0A            %7B this.renderDeleteElementButton() %7D%0A          %3C/div%3E%0A        )%0A      case TEST_INPUT:%0A        const %7B%0A          changeP
 rimitive
 s,%0A 
@@ -1404,17 +1404,20 @@
 rimitive
-s
+Type
 ,%0A      
@@ -1420,20 +1420,26 @@
         
-type
+primitives
 ,%0A      
@@ -1442,20 +1442,19 @@
         
-valu
+typ
 e%0A      
@@ -2325,165 +2325,267 @@
     
-%3Cdiv%3E%0A              %3Clabel%3E%0A
+%7B this.renderPrimitiveValueInput() %7D%0A          %3C/div%3E%0A    
     
+)%0A
       
-      %7B translations%5B'en'%5D.value %7D%0A              %3C/label%3E%0A              %3Cinput
+default:%0A        return this.renderDeleteElementButton()%0A    %7D%0A  %7D%0A%0A  renderDeleteElementButton() %7B%0A    const %7B%0A      deleteElement,
 %0A      
+id%0A
     
-      value=%7B value %7D%0A        
+%7D = this.props%0A%0A    return (%0A      %3Cbutton%0A
     
@@ -2595,49 +2595,37 @@
  onC
-hange
+lick
 =%7B (
-e
 ) =%3E 
-changePrimitiveValue(id, e
+deleteElement(id
 ) %7D%0A
@@ -2634,17 +2634,8 @@
     
-        /
 %3E%0A  
@@ -2644,105 +2644,159 @@
     
-    %3C/div%3E%0A          %3C/div%3E%0A   
+%7B translations%5B'en'%5D.delete %7D%0A      %3C/button%3E%0A
     
- 
 )%0A  
-    default:%0A        const %7B%0A          deleteElement%0A    
+%7D%0A%0A  renderPrimitiveValueInput() %7B%0A    const %7B%0A      changePrimitiveValue,%0A      id,%0A      value%0A
     
@@ -2807,36 +2807,32 @@
 this.props%0A%0A    
-   
- 
 return (%0A       
@@ -2834,119 +2834,182 @@
     
-    %3Cbutton%0A            onClick=%7B () =%3E deleteElement(id) %7D%0A          %3E%0A            %7B translations%5B'en'%5D.delete
+%3Cdiv%3E%0A        %3Clabel%3E%0A          %7B translations%5B'en'%5D.value %7D%0A        %3C/label%3E%0A        %3Cinput%0A          value=%7B value %7D%0A          onChange=%7B (e) =%3E changePrimitiveValue(id, e)
  %7D%0A 
@@ -3019,35 +3019,29 @@
     
-  
-%3C/button%3E%0A        )
+/%3E%0A      %3C/div%3E
 %0A    
-%7D
+)
 %0A  %7D

Change 'value' prop of Primitive