import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import Tooltip from '@material-ui/core/Tooltip';
import { t } from 'Framework/i18n';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';

const styles = theme => ({
    toolButtonPositioning: {
        width: 40,
        height: 40,
        minWidth: 35,
        minHeight: 35,
        margin: '0px 8px 0 0',
        [theme.breakpoints.down('xs')]: {
            margin: '0px 5px 0 0',
        },
    },
});

class ObjectTools extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        handleButtonClick: PropTypes.func,
        handleObjectButtonClick: PropTypes.func,
        flipToBackDisabled: PropTypes.bool,
        flipToFrontDisabled: PropTypes.bool,
        alignVerticalCenterIcon: PropTypes.element,
        alignHorizontalCenterIcon: PropTypes.element,
        moveDownIcon: PropTypes.element,
        moveUpIcon: PropTypes.element,
    };

    render() {
        const {
            classes,
            handleObjectButtonClick,
            flipToBackDisabled,
            flipToFrontDisabled,
            alignVerticalCenterIcon,
            alignHorizontalCenterIcon,
            moveDownIcon,
            moveUpIcon,
        } = this.props;

        return (
            <React.Fragment>
                <AnalyticsWrapper targetId="align_horizontal_center">
                    <Button
                        className={classes.toolButtonPositioning + ' object-btn'}
                        variant="outlined"
                        value="alignHorizontalCenter"
                        onClick={handleObjectButtonClick}
                    >
                        <Tooltip title={t('objectTools.alignHorizontalCenter')}>
                            {alignHorizontalCenterIcon ?? <Icon>flip</Icon>}
                        </Tooltip>
                    </Button>
                </AnalyticsWrapper>
                <AnalyticsWrapper targetId="align_vertical_center">
                    <Button
                        className={classes.toolButtonPositioning + ' object-btn'}
                        variant="outlined"
                        value="alignVerticalCenter"
                        onClick={handleObjectButtonClick}
                    >
                        <Tooltip title={t('objectTools.alignVerticalCenter')}>
                            {alignVerticalCenterIcon ?? (
                                <Icon style={{ transform: 'rotate(90deg)' }}>flip</Icon>
                            )}
                        </Tooltip>
                    </Button>
                </AnalyticsWrapper>
                <AnalyticsWrapper targetId="align_move_down">
                    <Button
                        className={classes.toolButtonPositioning + ' object-btn'}
                        variant="outlined"
                        value="moveDown"
                        onClick={handleObjectButtonClick}
                        disabled={flipToBackDisabled}
                    >
                        <Tooltip title={t('objectTools.moveDown')}>
                            {moveDownIcon ?? <Icon>flip_to_back</Icon>}
                        </Tooltip>
                    </Button>
                </AnalyticsWrapper>
                <AnalyticsWrapper targetId="align_move_up">
                    <Button
                        className={classes.toolButtonPositioning + ' object-btn'}
                        variant="outlined"
                        value="moveUp"
                        onClick={handleObjectButtonClick}
                        disabled={flipToFrontDisabled}
                    >
                        <Tooltip title={t('objectTools.moveUp')}>
                            {moveUpIcon ?? <Icon>flip_to_front</Icon>}
                        </Tooltip>
                    </Button>
                </AnalyticsWrapper>
            </React.Fragment>
        );
    }
}

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