import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import ListItemText from '@material-ui/core/ListItemText';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import Input from '@material-ui/core/Input';
import Typography from '@material-ui/core/Typography';
import AnalyticsWrapper from '../Analytics/AnalyticsWrapper';
import PropTypes from 'prop-types';

const styles = theme => ({
    formControl: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
        marginRight: theme.spacing(3),
        minWidth: 150,
        maxWidth: 500,
        [theme.breakpoints.down('xs')]: {
            marginRight: theme.spacing(1),
            '& .MuiInput-root': {
                maxWidth: 144,
            },
        },
    },
    root: {
        display: 'flex',
        maxWidth: 'calc(100% - 40px)', // subtract the burger menu width

        [theme.breakpoints.up('sm')]: {
            maxWidth: 'calc(100% - 160px)', // subtract the full menu width
        },

        [theme.breakpoints.between('xs', 'sm')]: {
            display: 'flex',
            alignItems: 'center',
        },
    },
    typographyBody: {
        fontWeight: 'bold',
        fontSize: 15,
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        marginRight: 5,
        lineHeight: '18px',
        textAlign: 'center',
        letterSpacing: 'unset',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        [theme.breakpoints.down('sm')]: {
            fontSize: 12,
        },
    },
    fontWeightNormal: {
        fontWeight: 'normal',
    },
    typoLineHeight: {
        marginLeft: 24,
    },
    variantThumbnail: {
        width: 50,
        height: 50,
        maxHeight: '100%',
        maxWidth: '100%',
    },
    menuItemRoot: {
        whiteSpace: 'unset',
        height: 76,
        width: 220,
    },
    selectedListItem: {
        '& span': {
            fontWeight: 'bold',
            letterSpacing: 'unset',
        },
    },
    arrowNone: {
        display: 'none',
    },
    itemInfoWrapper: {
        display: 'inline-flex',
        alignItems: 'center',
        [theme.breakpoints.down('sm')]: {
            display: 'block',
            maxWidth: '100%',
            overflow: 'hidden',
            '& p': {
                marginLeft: 0,
                display: 'block',
                maxWidth: '100%',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                textAlign: 'start',
            },
        },
    },
    variantList: {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        textTransform: 'capitalize',
        paddingLeft: 16,
        '& span': {
            fontSize: '15px',
            lineHeight: '22px',
            letterSpacing: 'unset',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        },
    },
    selectInputUnderline: {
        '&:after': {
            borderBottom: '2px solid ' + theme.palette.primary.main,
        },
    },
    selectMenu: {
        '& img': {
            display: 'none',
        },
        '& div': {
            '& span': {
                fontSize: '15px',
                fontWeight: 'bold',
            },
        },
    },
});

const ITEM_HEIGHT = 55;
const ITEM_PADDING_TOP = 15;
const MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 7 + ITEM_PADDING_TOP,
            width: 220,
            top: 55,
        },
    },
};

class VariantChooser extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        value: PropTypes.string,
        variants: PropTypes.array,
        title: PropTypes.string,
        handleChange: PropTypes.func,
        renderExtraInfo: PropTypes.func,
    };

    render() {
        const { classes, value, variants, handleChange, title, renderExtraInfo } = this.props;
        const multipleVariants = variants.length > 1;
        const arrowVisible = !multipleVariants ? classes.arrowNone : '';
        return (
            <div className={classes.root}>
                {variants.length > 1 && (
                    <FormControl className={classes.formControl}>
                        <AnalyticsWrapper targetId="change_variant">
                            <Select
                                value={value}
                                onChange={handleChange}
                                input={
                                    <Input
                                        id="variantInput"
                                        classes={{ underline: classes.selectInputUnderline }}
                                    />
                                }
                                MenuProps={MenuProps}
                                classes={{
                                    selectMenu: classes.selectMenu,
                                    icon: arrowVisible,
                                }}
                            >
                                {variants.map(variant => {
                                    return (
                                        <MenuItem
                                            key={variant.key}
                                            value={variant.value}
                                            aria-label={variant.title}
                                            classes={{
                                                selected: classes.selectedListItem,
                                            }}
                                            className={classes.menuItemRoot}
                                        >
                                            {variant.url && (
                                                <img
                                                    src={variant.url}
                                                    alt={variant.title}
                                                    aria-label={variant.title}
                                                    className={classes.variantThumbnail}
                                                />
                                            )}
                                            <ListItemText
                                                className={classes.variantList}
                                                primary={variant.title}
                                            />
                                        </MenuItem>
                                    );
                                })}
                            </Select>
                        </AnalyticsWrapper>
                    </FormControl>
                )}
                <div className={classes.itemInfoWrapper}>
                    <Typography classes={{ body2: classes.typographyBody }} component="p" variant="body2">
                        {title}
                    </Typography>
                    {renderExtraInfo && renderExtraInfo(this.props)}
                </div>
            </div>
        );
    }
}

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