import React from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

const style = {
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: 'rgb(224, 224, 224)',
        backgroundColor: 'rgb(255, 255, 255)',
        height: '42px'
    },
    iconStyle = {
        fill: 'rgba(0, 0, 0, 0.870588)'
    },
    labelStyle = {
        paddingTop: '12px',
        paddingBottom: '12px',
        paddingLeft: '12px',
        lineHeight: 'inherit',
        fontFamily: 'Brandon Text Regular',
        fontSize: '14px',
        color: 'rgba(0, 0, 0, 0.7)'
    };

export default class xSelectBox extends React.Component {

    constructor(props) {
        super();
        this.state = {
            selectedValue: {
                value: props.value
            }
        };

    }

    getValue = () => {
        return this.state.selectedValue;
    };

    onSelect = (event, index, value) => {
        let selectedObj;
        this.props.dataSource.forEach((obj) => {
            if (obj.value === value) {
                selectedObj = obj;
            }
        });
        this.setState({
            selectedValue: selectedObj
        });
        if (this.props.onSelect) {
            this.props.onSelect(selectedObj);
        }
    };

    render() {
        var newStyle = Object.assign(style);
        if(this.props.style){
            for(let key of Object.keys(this.props.style)){
                newStyle[key] = this.props.style[key];
            }
        }
        return (
            <SelectField
                style={newStyle}
                labelStyle={labelStyle}
                iconStyle={iconStyle}
                value={this.state.selectedValue.value}
                onChange={this.onSelect}
            >
                { this.props.dataSource.map((obj, i) => (
                    <MenuItem
                        key={i}
                        value={obj.value}
                        primaryText={obj.label}
                    />
                )) }
            </SelectField>
        );
    };
}
