import React from 'react';
import Icon from '@material-ui/core/Icon';
import PropTypes from 'prop-types';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Popover from '@material-ui/core/Popover';

const styles = () => ({
    alignText: {
        padding: '5px',
        whiteSpace: 'pre-line',
    },
    popoverRootElement: {
        '& > *': {
            maxWidth: '500px',
            maxHeight: '200px',
            marginRight: '10px',
            marginBottom: '30px',
        },
    },
    iconButton: {
        padding: '12px 0 12px 12px',
        marginLeft: 5,
        '&:hover': {
            backgroundColor: 'transparent',
        },
    },
    infoIcon: {
        '&:hover': {
            color: '#76777A',
        },
    },
});

class InformationTag extends React.Component {
    static propTypes = {
        infoText: PropTypes.string,
        classes: PropTypes.object,
    };

    state = {
        anchorElement: null,
    };

    handleClose = () => {
        this.setState({ anchorElement: null });
    };

    handleToggle = event => {
        this.setState({ anchorElement: event.target });
    };

    render() {
        const { infoText, classes } = this.props;
        const { anchorElement } = this.state;
        const open = Boolean(anchorElement);
        return (
            <React.Fragment>
                <IconButton classes={{ root: classes.iconButton }} onClick={this.handleToggle}>
                    <Icon className={classes.infoIcon}>info</Icon>
                </IconButton>
                <Popover
                    className={classes.popoverRootElement}
                    onClose={this.handleClose}
                    onClick={this.handleClose}
                    open={open}
                    anchorEl={anchorElement}
                    anchorOrigin={{
                        vertical: 'center',
                        horizontal: 'left',
                    }}
                    transformOrigin={{
                        vertical: 'bottom',
                        horizontal: 'right',
                    }}
                >
                    <Typography className={classes.alignText}>{infoText}</Typography>
                </Popover>
            </React.Fragment>
        );
    }
}

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