import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { t } from 'Framework/i18n';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
import customClassName from 'App/Utils/customClassName';
import Thumbnail from '../../Containers/Thumbnail';
import PreviewPortal from '../PreviewPortal';

const styles = theme => ({
    viewsContainer: {
        position: 'absolute',
        bottom: 0,
    },
    fullScreenWrapper: {
        display: 'flex;',
        justifyContent: 'center',
    },
    button: {
        textTransform: 'none',
        left: 'calc(50%)',
        zIndex: 2,
        transform: 'translate(-50%, 0)',
        pointerEvents: 'all',
        [theme.breakpoints.down('sm')]: {
            zIndex: 5,
        },
        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
            display: 'none',
        },
    },
    buttonBottom: {},
    buttonTop: {},
    buttonIcon: {
        paddingRight: 8,
        position: 'relative',
        top: -1,
    },
    thumbnailGrid: {
        [theme.breakpoints.between('xs', 'md')]: {
            width: 'calc(100% - 360px)', // subtract with right toolbar width
            maxWidth: 'calc(100% - 360px)',
        },
        // align it with the main container, so it will be aligned with the Designer image
        [theme.breakpoints.up('md')]: {
            position: 'absolute',
            bottom: 0,
            left: 'calc(50% - 175px)', // subtract half of the right sidebar width
            width: 453, // 2 x 24 (arrow width) + 425 (carousel width)
            transform: 'translateX(-50%)',
        },
        [theme.breakpoints.down('xs')]: {
            width: '100%',
            maxWidth: '100%',
            bottom: '-40px',
        },
    },
    buttonView: {
        textTransform: 'none',
        bottom: 35,
        position: 'absolute',
        left: 'calc(50% - 200px)',
        [theme.breakpoints.down('xs')]: {
            left: 'calc(50% - 75px)',
            bottom: 0,
            height: 56,
        },
        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
            display: 'none',
        },
    },
});

export const PreviewButton = ({ classes, bottom, top, onClick }) => (
    <AnalyticsWrapper targetId="preview_open">
        <Button
            className={clsx(
                classes.button,
                bottom && classes.buttonBottom,
                top && classes.buttonTop,
                customClassName('preview-button')
            )}
            onClick={onClick}
        >
            <Icon className={classes.buttonIcon}>remove_red_eye</Icon>
            <Typography className="text">{t('configurator.previewButton')}</Typography>
        </Button>
    </AnalyticsWrapper>
);
PreviewButton.propTypes = {
    classes: PropTypes.object.isRequired,
    onClick: PropTypes.func.isRequired,
    bottom: PropTypes.bool,
    top: PropTypes.bool,
};

class FullScreenView extends React.Component {
    static propTypes = {
        handleOpenPreview: PropTypes.func,
        handleClosePreview: PropTypes.func,
        hasItems: PropTypes.bool,
        classes: PropTypes.object,
        children: PropTypes.any,
        showPreviewButton: PropTypes.bool,
        showDesignViewList: PropTypes.bool,
        width: PropTypes.string,
        dialogStyle: PropTypes.string,
        areAllDesignAreasEmpty: PropTypes.bool,
        renderTopPreviewButton: PropTypes.func,
        ThumbnailComponent: PropTypes.elementType,
        thumbnailProps: PropTypes.object,
        thumbnailDotMode: PropTypes.bool,
        renderButtonOnTop: PropTypes.bool,
    };

    static defaultProps = {
        showPreviewButton: true,
        renderTopPreviewButton: ({ width, areAllDesignAreasEmpty, ...props }) =>
            isWidthDown('sm', width) && !areAllDesignAreasEmpty && <PreviewButton {...props} top />,
        ThumbnailComponent: Thumbnail,
        renderButtonOnTop: false,
    };

    state = {
        previewOpen: false,
    };

    openPreview = () => {
        this.setState({ previewOpen: true }, () => this.props.handleOpenPreview());
    };

    closePreview = () => {
        this.setState({ previewOpen: false }, () => this.props.handleClosePreview());
    };

    render() {
        const { previewOpen } = this.state;
        const {
            hasItems,
            classes,
            children,
            showPreviewButton,
            showDesignViewList,
            width,
            dialogStyle,
            renderTopPreviewButton,
            ThumbnailComponent,
            thumbnailProps,
            thumbnailDotMode,
            renderButtonOnTop,
        } = this.props;

        const topPreviewButton = renderTopPreviewButton({
            ...this.props,
            onClick: this.openPreview,
        });

        return (
            <React.Fragment>
                {previewOpen && (
                    <PreviewPortal
                        closePreviewMode={this.closePreview}
                        thumbnailClick={this.handleViewChange}
                        previewOpen={previewOpen}
                        hasItems={hasItems}
                        dialogStyle={dialogStyle}
                    >
                        {children}
                    </PreviewPortal>
                )}
                {topPreviewButton}
                {!previewOpen && children}
                {showDesignViewList ? (
                    <Grid
                        container
                        direction="column"
                        justifyContent="space-between"
                        className={clsx(classes.viewsContainer, customClassName('views'))}
                    >
                        {showPreviewButton && (
                            <Grid
                                item
                                xs={12}
                                sm={12}
                                md={8}
                                className={clsx(
                                    classes.thumbnailGrid,
                                    thumbnailDotMode || isWidthDown('md', width)
                                        ? 'dots-container'
                                        : 'image-container'
                                )}
                            >
                                {renderButtonOnTop ? (
                                    <ThumbnailComponent {...thumbnailProps} />
                                ) : (
                                    <>
                                        <ThumbnailComponent {...thumbnailProps} />
                                        {!topPreviewButton && (
                                            <PreviewButton
                                                {...this.props}
                                                bottom
                                                onClick={this.openPreview}
                                            />
                                        )}
                                    </>
                                )}
                            </Grid>
                        )}
                    </Grid>
                ) : (
                    !topPreviewButton &&
                    showPreviewButton &&
                    width !== 'xs' && (
                        <Grid container direction="column" justifyContent="space-between" alignItems="center">
                            <PreviewButton
                                {...this.props}
                                onClick={this.openPreview}
                                classes={{
                                    button: classes.buttonView,
                                    buttonIcon: classes.buttonIcon,
                                }}
                            />
                        </Grid>
                    )
                )}
            </React.Fragment>
        );
    }
}

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