import React, { Component } from 'react';
import { translate } from 'react-i18next';
import style from './style.styl';

//Item template
let DropdownItem = (props) => (
    <li className={style.action} {...props}>{props.value}</li>
)

class Dropdown extends Component {
    constructor (props) {
        super()
        this.state = {
            selected: props.selected || Object.keys(props.options)[0]
        }
        this.apply = props.apply || function () {}
    }

    onSelect (o) {
        this.setState({selected: o})
        this.apply(o)
    }

    render() {

        let {props, state} = this

        //Label template
        const Label = (props) => (
            <div className={style.label} style={{backgroundColor: state.selected}}/>
        )

        // Get items
        const getItems = (props) => Object.keys(props.options).map((k, i) => (
            state.selected === k ? null :
            <DropdownItem  key={i}
                   style={{backgroundColor: props.config.type === 'color' ? k : null}}
                   onClick={this.onSelect.bind(this, k)}
                   value={props.config.showText ? props.options[k] : null}
            />
        ))

        return  (
            <div className={"boostrap-dropdown " + style[ "dropdown-" + props.config.type] }>
                <div className="dropdown-toggle" data-toggle="dropdown">
                     {props.config.showLabel === true ? <Label />  : null}
                    <span>{state.selected}</span>
                    <i className="material-icons"></i>
                </div>
                <div className="dropdown-menu">
                    <ul className={style.items}>{getItems(props)}</ul>
                    {props.children}
                </div>
            </div>
        )
    }
}

Dropdown.defaultProps = {
    config : {
        //Dropdon Type
        type: "text",
        //Display item text
        showText: true,
        //Display selected item label
        showLabel: false
    }
}

const colorOpts = {
    type: "color",
    showText: false,
    showLabel: true
}

let DropdownColor =  (props) => (
    <Dropdown config={colorOpts}  {...props}>
        <DropdownItem value="More colors..."/>
    </Dropdown>
)

module.exports = {
    Dropdown,
    DropdownColor
}

@@ -119,21 +119,31 @@
 %0A%0A//
-Item template
+Dropdown Item component
 %0Alet
@@ -215,16 +215,25 @@
 .props%7D%3E
+%0A        
 %7Bprops.v
@@ -237,16 +237,21 @@
 s.value%7D
+%0A    
 %3C/li%3E%0A)%0A
@@ -589,17 +589,16 @@
 der() %7B%0A
-%0A
         
@@ -947,16 +947,31 @@
 downItem
+%0A              
   key=%7Bi
@@ -972,19 +972,16 @@
 key=%7Bi%7D%0A
-   
         
@@ -1072,19 +1072,16 @@
         
-   
 onClick=
@@ -1110,19 +1110,16 @@
 is, k)%7D%0A
-   
         
@@ -1181,28 +1181,16 @@
  : null%7D
-%0A           
  /%3E%0A    
@@ -1382,17 +1382,16 @@
 pdown%22%3E%0A
- 
         

clean dropdown index.js