import React from 'react';
import PropTypes from 'prop-types';
import isFunction from 'lodash/isFunction';
import Icon from '@material-ui/core/Icon';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import { withAlignTarget } from 'redhotmagma-visualization/AlignTargetProvider';
import { t } from 'Framework/i18n';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
import Thumbnails from '../../Containers/Thumbnail';
import Dialog from '@material-ui/core/Dialog';
import { CustomDialogHeader } from '../../../../../Shared/Components/CustomDialog';
import { withAnalyticsTarget } from '../../../../Shared/Components/Analytics/AnalyticsWrapper';

const styles = theme => ({
    fullscreenPortal: {
        background: 'white',
        position: 'absolute',
        height: '100%',
        width: '100%',
        zIndex: 2,
        top: 0,
        left: 0,

        '& .previewClose': {
            color: 'grey',
            position: 'absolute',
            right: 15,
            top: 15,

            '&:hover': {
                cursor: 'pointer',
            },
        },
    },
    fullScreenTitle: {
        zIndex: 3,
        position: 'absolute',
        width: '100%',
        [theme.breakpoints.down('xs')]: {
            borderTop: '7px solid ' + theme.palette.primary.main,
        },
    },
    visualizationWrapperThumbs: {
        height: 'calc(100% - 200px)',
        [theme.breakpoints.down('xs')]: {
            '& > div:first-child': {
                height: '85% !important',
            },
            height: 'calc(100% - 130px)',
        },
    },
    visualizationWrapperCanvas: {
        height: '100% ',
        [theme.breakpoints.up('sm')]: {
            height: 'calc(100% - 100px)',
        },
    },
    closePreview: {
        color: theme.palette.primary.darkText,
        fontSize: 15,
        fontWeight: 500,
        lineHeight: '18px',
        textTransform: 'none',
        borderRadius: '4px',
        marginTop: 10,
        '& b': {
            marginLeft: 8,
        },
    },
    ClosePreviewRoot: {
        marginBottom: 35,
        [theme.breakpoints.down('xs')]: {
            marginBottom: 16,
        },
    },
    closPreviewIconRoot: {
        height: 24,
        width: 24,
        fontSize: '24px',
        lineHeight: '24px',
        textAlign: 'center',
        marginRight: 8,
    },
    previewTitle: {
        fontSize: 24,
        fontWeight: 'bold',
        marginLeft: 32,
        paddingTop: 16,
    },
});

class PreviewPortal extends React.Component {
    static propTypes = {
        thumbnailClick: PropTypes.func,
        thumbnails: PropTypes.array,
        closePreviewMode: PropTypes.func,
        classes: PropTypes.object,
        width: PropTypes.string,
        dialogStyle: PropTypes.string,
        hasItems: PropTypes.bool,
        hasMoreItems: PropTypes.bool,
        alignTarget: PropTypes.shape({ add: PropTypes.func.isRequired, remove: PropTypes.func.isRequired })
            .isRequired,
        children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    };

    componentDidMount() {
        this.props.alignTarget.add(this.wrapperRef.current);
    }

    componentWillUnmount() {
        this.props.alignTarget.remove(this.wrapperRef.current);
    }

    wrapperRef = React.createRef();

    onThumbnailClick = () => (thumbnails, src, active) => {
        if (isFunction(this.props.thumbnailClick)) {
            this.props.thumbnailClick(thumbnails, src, active);
        }
    };

    render() {
        const { hasMoreItems, closePreviewMode, classes, children, width } = this.props;

        const dialogTitleId = 'product-preview-dialog-title';

        return (
            <Dialog fullScreen open aria-labelledby={dialogTitleId} onClose={closePreviewMode}>
                <div className={classes.fullScreenTitle}>
                    {width === 'xs' && (
                        <CustomDialogHeader
                            dialogTitle={t('configurator.previewTitle')}
                            dialogTitleId={dialogTitleId}
                            onClose={withAnalyticsTarget(closePreviewMode, 'preview_close')}
                        />
                    )}
                </div>
                <div
                    ref={this.wrapperRef}
                    className={
                        hasMoreItems ? classes.visualizationWrapperThumbs : classes.visualizationWrapperCanvas
                    }
                >
                    {children}
                </div>
                {hasMoreItems && <Thumbnails previewOpen={true} />}
                {width !== 'xs' && (
                    <Grid
                        container
                        className={classes.CloseEditorRoot}
                        alignItems="center"
                        justifyContent="center"
                    >
                        <AnalyticsWrapper targetId="preview_close">
                            <Button
                                variant="text"
                                onClick={closePreviewMode}
                                classes={{ root: classes.closePreview }}
                                size="large"
                            >
                                <Icon
                                    classes={{
                                        root: classes.closePreviewIconRoot,
                                    }}
                                >
                                    close
                                </Icon>
                                <b>{t('configurator.previewClose')}</b>
                            </Button>
                        </AnalyticsWrapper>
                    </Grid>
                )}
            </Dialog>
        );
    }
}

export default withWidth()(withStyles(styles, { name: 'Portal' })(withAlignTarget(PreviewPortal)));
