import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import PropTypes from 'prop-types';
import clsx from 'clsx';

const styles = theme => ({
    root: {
        display: 'flex',
        flexDirection: 'column',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        overflowX: 'hidden',
        '&$fallbackMode': {
            '& $main': {
                [theme.breakpoints.up('md')]: {
                    width: `calc(100% - ${theme.layout.sidebar.width}px)`,
                },
                '@media (orientation: landscape)': {
                    flexDirection: 'row',
                },
            },
        },
        // helper classes can be used on contained elements
        '& .noShrink': {
            flexShrink: 0,
        },
        '& .verticalSpacing': {
            marginTop: theme.spacing(1),
            marginBottom: theme.spacing(1),
        },
        '& .md': {
            [theme.breakpoints.up('md')]: {},
        },
        '& .sm': {
            [theme.breakpoints.down('sm')]: {},
        },
    },
    fallbackMode: {},
    header: {},
    container: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        [theme.breakpoints.up('md')]: {
            margin: '8px 20px 24px 8px',
        },
        [theme.breakpoints.down('md')]: {
            margin: '8px 20px 16px 8px',
        },
        [theme.breakpoints.down('xs')]: {
            flexDirection: 'column',
            margin: theme.smallScreen.padding,
        },
        position: 'relative',
    },
    containerTabletPortrait: {
        flexDirection: 'column',
    },
    main: {
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        // the pointer events should be passed through to the visualization component
        pointerEvents: 'none', // important: don't remove this
    },
    sidebar: ({ isPortraitMode }) => ({
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        marginTop: theme.spacing(1),
        width: !isPortraitMode ? theme.layout.sidebar.width : '',
        [theme.breakpoints.up('sm')]: {
            marginTop: 0,
            marginLeft: theme.spacing(1),
        },
        [theme.breakpoints.down('xs')]: {
            maxWidth: 'none',
        },
        '& > *': {
            // make the components in the sidebar overlap the visualization
            zIndex: 1,
        },
        // the pointer events should be passed through to the visualization component
        pointerEvents: 'none', // important: don't remove this
    }),
    visualization: {
        // the visualization is in the background with absolute positioning
        position: 'absolute',
        width: '100%',
        height: '100%',
        [theme.breakpoints.down('xs')]: {
            height: 'calc(100% - 156px)',
            top: 69,
        },
    },
    visualizationOverlay: {
        pointerEvents: 'none',
        zIndex: 1,
    },
    designer: {
        position: 'absolute',
        width: '100%',
        height: 'calc(100% - 342px)',
        display: 'flex',
        pointerEvents: 'none',
        top: 60,
        [theme.breakpoints.up('sm')]: {
            top: 0,
        },
        [theme.orientation.landscape]: {
            width: 'calc(100% - 366px)',
            height: 'calc(100% - 150px)',
            top: 0,
        },
    },
    toBottom: {
        marginTop: 'auto',
    },
    overlayContainer: {
        position: 'absolute',
        height: '100%',
        zIndex: 1,

        [theme.breakpoints.down('xs')]: {
            position: 'absolute',
        },
    },
    graphicsEditorWrapper: {
        maxWidth: theme.layout.sidebar.width,
        width: '100%',
        marginLeft: 'auto',
        marginRight: '0',
    },
});

const DefaultLayout = ({
    width,
    classes,
    renderHeader,
    renderMain,
    renderSidebar,
    renderVisualization,
    renderLoader,
    renderLicenseNotice,
    fallbackMode,
    isPortraitMode,
    imageOnly,
    renderDesigner,
    showDesigner,
    visualizationOverlayMode,
    renderInvalidConfigurationNotice,
}) => {
    return imageOnly ? (
        <div className={`${classes.root} ${fallbackMode ? classes.fallbackMode : ''}`}>
            <div className={`${classes.container} ${isPortraitMode ? classes.containerTabletPortrait : ''}`}>
                {!fallbackMode && <div className={classes.visualization}>{renderVisualization()}</div>}
                <div className={classes.main}>
                    {renderMain({
                        area: 'main',
                        width,
                        classes,
                    })}
                </div>
            </div>
            {renderLoader()}
        </div>
    ) : (
        <div className={`${classes.root} ${fallbackMode ? classes.fallbackMode : ''}`}>
            {renderLicenseNotice()}
            {renderInvalidConfigurationNotice()}
            <div className={classes.header}>
                {renderHeader({
                    area: 'header',
                    width,
                    classes,
                })}
            </div>
            <div className={`${classes.container} ${isPortraitMode ? classes.containerTabletPortrait : ''}`}>
                {renderDesigner && renderDesigner({ designerClassName: classes.designer })}
                {!fallbackMode && (
                    <div
                        className={clsx(
                            classes.visualization,
                            showDesigner && visualizationOverlayMode && classes.visualizationOverlay
                        )}
                    >
                        {renderVisualization()}
                    </div>
                )}
                <div className={classes.main}>
                    {renderMain({
                        area: 'main',
                        width,
                        classes,
                    })}
                </div>
                <div className={classes.sidebar}>
                    {renderSidebar({
                        area: 'sidebar',
                        width,
                        classes,
                    })}
                </div>
            </div>
            {renderLoader()}
        </div>
    );
};

DefaultLayout.propTypes = {
    classes: PropTypes.object,
    width: PropTypes.string,
    renderHeader: PropTypes.func,
    renderMain: PropTypes.func,
    renderSidebar: PropTypes.func,
    renderVisualization: PropTypes.func,
    renderLoader: PropTypes.func,
    renderLicenseNotice: PropTypes.func,
    fallbackMode: PropTypes.bool,
    isPortraitMode: PropTypes.bool,
    imageOnly: PropTypes.bool,
    renderInvalidConfigurationNotice: PropTypes.func,
};

export default withStyles(styles, { name: 'DefaultLayout' })(
    withWidth({ initialWidth: 'xl' })(DefaultLayout)
);
