import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import CheckCircle from '@material-ui/icons/CheckCircle';
import Info from '@material-ui/icons/Info';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import Tooltip from '@material-ui/core/Tooltip';
import upperFirst from 'lodash/upperFirst';
import { t, translationExists } from 'Framework/i18n';
import ObjectTools from '../ObjectTools';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
import CustomDialog from 'Shared/Components/CustomDialog';
import customClassName from 'App/Utils/customClassName';

const styles = theme => ({
    card: {
        borderTop: '7px solid ' + theme.palette.primary.main,
        position: 'relative',
        overflow: 'visible',
    },
    cardUnboxed: {
        borderTop: 'none',
        boxShadow: 'none',
        borderRadius: 0,
    },
    CardContentWrapper: {
        padding: 8,
        [theme.breakpoints.down('xs')]: {
            padding: '8px 0',
            '&:last-child': {
                paddingBottom: 12,
            },
        },
        '& .object-btn': {
            [theme.breakpoints.down('xs')]: {
                height: 50,
                width: 50,
                margin: '15px 5px 0 0',
            },
        },
    },
    printQuality: {
        display: 'inline-flex',
        alignItems: 'center',
        backgroundColor: '#000000',
        marginBottom: 15,
        borderRadius: '4px',
        color: '#fff',
        padding: '10px',
        width: '100%',
        minHeight: 40,
        [theme.breakpoints.down('xs')]: {
            margin: 0,
            minHeight: 56,
        },
    },
    printQualityText: {
        color: '#fff',
        padding: '0 10px',
        fontSize: 15,
        lineHeight: '18px',
    },
    printQualityGreat: {
        backgroundColor: '#4FC36D',
    },
    printQualityOk: {
        backgroundColor: '#FF9800',
    },
    printQualityPoor: {
        backgroundColor: '#ED1C29',
    },
    printQualityIcon: {
        verticalAlign: 'middle',
    },
    printQualityInfoIcon: {
        verticalAlign: 'middle',
        cursor: 'pointer',
    },
    editButtonLine: {
        margin: '15px 0',
    },
    editButton: {
        minWidth: 30,
        width: 35,
        margin: '0px 8px 0 0',

        [theme.breakpoints.down('xs')]: {
            margin: '15px 5px 0 0',
            height: 50,
            width: 50,
        },
    },
});

class ImageControlbox extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        boxed: PropTypes.bool,
        printQuality: PropTypes.string,
        openImageEditDialog: PropTypes.func,
        handleObjectButtonClick: PropTypes.func,
        imageData: PropTypes.object,
        flipToFrontDisabled: PropTypes.bool,
        flipToBackDisabled: PropTypes.bool,
        canvas: PropTypes.object,
        alignVerticalCenterIcon: PropTypes.element,
        alignHorizontalCenterIcon: PropTypes.element,
        moveDownIcon: PropTypes.element,
        moveUpIcon: PropTypes.element,
    };

    constructor(props) {
        super(props);

        this.state = {
            printQualityInfoDialogOpen: false,
        };
    }

    onEditClick = () => {
        const { imageData, openImageEditDialog, canvas } = this.props;
        if (imageData.isPlaceHolderImage) {
            openImageEditDialog(null, canvas, true);
        } else {
            openImageEditDialog(imageData.identifier, canvas);
        }
    };

    onPrintQualityInfoClick = () => {
        this.setState({ printQualityInfoDialogOpen: true });
    };

    handlePrintQualityInfoDialogClose = () => {
        this.setState({ printQualityInfoDialogOpen: false });
    };

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

        const { printQualityInfoDialogOpen } = this.state;

        const printQualityInfoExists = translationExists(
            'imageControlbox.printQuality.' + this.props.printQuality
        );

        return (
            <React.Fragment>
                <Card
                    className={clsx(
                        boxed ? classes.card : classes.cardUnboxed,
                        customClassName('image-tools-box')
                    )}
                >
                    <CardContent className={boxed ? '' : classes.CardContentWrapper}>
                        <Grid container>
                            <Grid item xs={12} lg={12}>
                                <Grid container alignItems="center">
                                    <Grid
                                        item
                                        lg={printQualityInfoExists ? 10 : 12}
                                        className={
                                            classes.printQuality +
                                            ' ' +
                                            classes['printQuality' + upperFirst(printQuality)]
                                        }
                                    >
                                        <CheckCircle className={classes.printQualityIcon} />
                                        <Typography
                                            variant="body1"
                                            component="span"
                                            className={classes.printQualityText}
                                        >
                                            {t('imageControlbox.printQualityLabel')}:{' '}
                                            {t('imageControlbox.printQuality.' + printQuality)}
                                            {}
                                        </Typography>
                                    </Grid>
                                    {printQualityInfoExists && (
                                        <Grid item lg={2} align="center">
                                            <Info
                                                className={classes.printQualityInfoIcon}
                                                onClick={this.onPrintQualityInfoClick}
                                            />
                                        </Grid>
                                    )}
                                </Grid>
                            </Grid>
                            <Grid item xs={10} md={8} lg={8}>
                                <ObjectTools
                                    handleObjectButtonClick={handleObjectButtonClick}
                                    flipToFrontDisabled={flipToFrontDisabled}
                                    flipToBackDisabled={flipToBackDisabled}
                                    alignVerticalCenterIcon={alignVerticalCenterIcon}
                                    alignHorizontalCenterIcon={alignHorizontalCenterIcon}
                                    moveDownIcon={moveDownIcon}
                                    moveUpIcon={moveUpIcon}
                                />
                            </Grid>
                            <Grid item xs={2} md={4} lg={4}>
                                <AnalyticsWrapper targetId="edit_image">
                                    <Button
                                        style={{ float: 'right' }}
                                        className={classes.editButton}
                                        variant="outlined"
                                        onClick={this.onEditClick}
                                    >
                                        <Tooltip title={t('imageControlbox.editButtonTooltip')}>
                                            <Icon>edit</Icon>
                                        </Tooltip>
                                    </Button>
                                </AnalyticsWrapper>
                            </Grid>
                        </Grid>
                    </CardContent>
                </Card>
                <CustomDialog
                    open={printQualityInfoDialogOpen}
                    onClose={this.handlePrintQualityInfoDialogClose}
                >
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            {t('imageControlbox.printQuality.' + printQuality)}
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handlePrintQualityInfoDialogClose} color="primary">
                            OK
                        </Button>
                    </DialogActions>
                </CustomDialog>
            </React.Fragment>
        );
    }
}

export default withWidth({ initialWidth: 'lg' })(
    withStyles(styles, { name: 'ImageControlbox' })(ImageControlbox)
);
