import React from 'react';
import PropsTypes from 'prop-types';
import clsx from 'clsx';
import Icon from '@material-ui/core/Icon';
import { withStyles } from '@material-ui/core/styles';
import Hidden from '@material-ui/core/Hidden';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import AnalyticsWrapper from '../Analytics/AnalyticsWrapper';
import customClassName from 'App/Utils/customClassName';
import { t } from 'Framework/i18n';
import AccessibleButton from '../AccessibleButton/AccessibleButton';

const styles = theme => ({
    iconHover: {
        margin: theme.spacing(1),
        textAlign: 'center',
        verticalAlign: 'middle',
        lineHeight: '24px',
        width: '24px',
        height: '24px',
        '&:hover': {
            color: 'rgba(0,0,0, 0.5)',
            cursor: 'pointer',
        },
    },
    root: {
        whiteSpace: 'nowrap',
    },
    ToolbarButton: {
        padding: 0,
    },
    ToolbarIconButton: {
        height: 32,
        width: 32,
        padding: 8,
        '& span': {
            fontSize: 24,
            color: theme.palette.primary.darkText,
        },
    },
    MenuItemOption: {
        '@media (hover: none) , (pointer: coarse)': {
            '&:focus': {
                backgroundColor: '#fff',
            },
        },
    },
    toolTitle: {
        alignSelf: 'center',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        width: 175,
    },
});
const ITEM_HEIGHT = 52;

class ToolbarList extends React.Component {
    static propTypes = {
        classes: PropsTypes.object,
        tools: PropsTypes.array,
    };

    state = {
        anchorEl: null,
    };

    handleClick = event => {
        this.setState({ anchorEl: event.currentTarget });
    };

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

    render() {
        const { classes, tools } = this.props;
        const { anchorEl } = this.state;
        const open = Boolean(anchorEl);
        const toolbarMobileIcon = !open ? 'menu' : 'close';

        return (
            <div className={clsx(classes.root, customClassName('tools'))}>
                {tools && (
                    <Hidden xsDown>
                        {tools.map(tool => {
                            return (
                                <AnalyticsWrapper key={tool.key} targetId={tool.key}>
                                    <AccessibleButton onClick={tool.function}>
                                        <Icon
                                            title={tool.title && t(tool.title)}
                                            key={tool.key}
                                            className={classes.iconHover}
                                        >
                                            {tool.identifier}
                                        </Icon>
                                    </AccessibleButton>
                                </AnalyticsWrapper>
                            );
                        })}
                    </Hidden>
                )}
                <Hidden smUp>
                    <div>
                        <IconButton
                            aria-label="Menu"
                            aria-haspopup="true"
                            aria-controls="toolbar-menu"
                            classes={{
                                root: classes.ToolbarButton,
                                label: classes.ToolbarIconButton,
                            }}
                            onClick={this.handleClick}
                        >
                            <Icon>{toolbarMobileIcon}</Icon>
                        </IconButton>
                        <Menu
                            id="toolbar-menu"
                            anchorEl={anchorEl}
                            open={open}
                            getContentAnchorEl={null}
                            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                            transformOrigin={{ vertical: 'top', horizontal: 'center' }}
                            onClose={this.handleClose}
                            keepMounted
                            PaperProps={{
                                style: {
                                    maxHeight: ITEM_HEIGHT * 4.5,
                                    width: 250,
                                },
                            }}
                        >
                            {tools &&
                                tools.map(tool => (
                                    <AnalyticsWrapper key={tool.key} targetId={tool.key}>
                                        <AccessibleButton
                                            component={MenuItem}
                                            className={classes.MenuItemOption}
                                            key={tool.key}
                                            onClick={evt => {
                                                tool.function(evt);
                                                this.handleClose();
                                            }}
                                        >
                                            <Icon key={tool.key} className={classes.iconHover}>
                                                {tool.identifier}
                                            </Icon>
                                            <div className={classes.toolTitle}>
                                                {tool.title && t(tool.title)}
                                            </div>
                                        </AccessibleButton>
                                    </AnalyticsWrapper>
                                ))}
                        </Menu>
                    </div>
                </Hidden>
            </div>
        );
    }
}

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