import React from 'react';
import {ThemeProvider} from 'styled-material-components';
import {Text} from './Input';

import PropTypes from 'prop-types';

const SelectBase = Text.extend`
    .gfBuGj{
        width: calc(90% - ${props => props.theme.textInput.padding});
        color: ${props => props.theme.textInput.color.default};
    }

    .fRgSdL{
        bottom: auto;
        fill: ${props => props.theme.textInput.color.default};
    }

    .kdRyrf{
        color: ${props => props.theme.textInput.color.default};
    }
`

class Select extends React.Component{
    render(){
        return(
            <ThemeProvider theme={this.props.theme}>
                <SelectBase
                    hasBorder
                    options={this.props.options}
                    defaultOption={this.props.defaultOption || 'select one'}
                    onChange={this.props.onChange}
                    disabled={!this.props.options}
                />
            </ThemeProvider>
        );
    }
}

Select.propTypes = {
    options: PropTypes.array.isRequired,
    defaultOption: PropTypes.any,
    onChange: PropTypes.func

}

export default Select;
