import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Input from '@material-ui/core/Input';
import clsx from 'clsx';

const styles = theme => ({
    formControl: {
        width: '100%',
        [theme.breakpoints.down('xs')]: {
            paddingBottom: 16,
        },
    },
    selectRoot: {
        color: theme.palette.text.secondary,
    },
    selectUnderline: {
        '&:after': {
            borderBottom: '2px solid ' + theme.palette.primary.main,
        },
    },
    error: {},
    selectMenu: {
        height: 40,
        padding: '0',
        marginTop: 4,
        marginBottom: 4,
        '& p': {
            fontSize: 15,
            paddingLeft: 16,
            paddingRight: 16,
            lineHeight: '40px',
            [theme.breakpoints.down('xs')]: {
                lineHeight: '56px',
                paddingLeft: 2,
            },
        },
        '&:focus': {
            backgroundColor: 'transparent',
        },
        paddingRight: 20,
        [theme.breakpoints.down('xs')]: {
            height: 56,
            marginTop: 0,
            marginBottom: 0,
        },
    },
    selectBoldMenu: {
        padding: '0',
        '& p': {
            fontWeight: 'bold',
            letterSpacing: 0,
            '& span': {
                color: '#757575',
            },
        },
        '&$error': {
            '& p': {
                color: theme.palette.primary.main,
            },
        },
    },
});

class CustomSelect extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.number]),
        onChange: PropTypes.func,
        bold: PropTypes.bool,
        children: PropTypes.node,
        readOnly: PropTypes.bool,
        iconClass: PropTypes.string,
        autoWidth: PropTypes.bool,
    };

    render() {
        const { classes, bold, readOnly, iconClass, ...otherProps } = this.props;

        return (
            <FormControl className={classes.formControl}>
                <Select
                    input={
                        <Input
                            classes={{
                                root: classes.selectRoot,
                                underline: classes.selectUnderline,
                            }}
                            readOnly={readOnly}
                        />
                    }
                    classes={{
                        selectMenu: clsx(
                            otherProps.error && classes.error,
                            bold ? classes.selectBoldMenu : classes.selectMenu
                        ),
                        select: classes.selectMenu,
                        icon: iconClass,
                    }}
                    {...otherProps}
                />
            </FormControl>
        );
    }
}

export default withStyles(styles, { name: 'CustomSelect' })(CustomSelect);
