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

const PopupAreaContext = React.createContext({
    content: null,
    setContent: () => undefined,
    dismiss: () => undefined,
});

const styles = theme => ({
    defaultWrapper: {
        flex: 1,
        flexDirection: 'inherit',
        display: 'inherit',
        '&[data-state=hidden]': {
            maxHeight: 0,
            overflow: 'hidden',
            visibility: 'hidden',
        },
        '& > *': {
            pointerEvents: 'all', // needed to catch the pointer events again
        },
        [theme.breakpoints.up('md')]: {
            marginTop: '16px 16px 16px 0',
        },
        [theme.breakpoints.up('sm')]: {
            marginTop: 8,
        },
    },
    portalWrapper: {
        position: 'absolute',
        background: '#ffffff',
        top: 0,
        left: 0,
        bottom: 0,
        zIndex: 1,
        [theme.breakpoints.down('xs')]: {
            zIndex: 5, // Used 5 inorder to have higher zIndex value than viewsContainer which contains preview button in FullScreenView
        },
        '& div': {},
    },
});

class PopupAreaProvider extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        width: PropTypes.string,
        isPortalBreakPoint: PropTypes.func,
        children: PropTypes.node,
    };
    static defaultProps = {
        isPortalBreakPoint: width => isWidthDown('sm', width),
    };

    state = {
        content: null,
        options: {
            hideChildren: false,
        },
        setContent: (content, options) => this.setState({ content, options }),
        dismiss: () => this.setState({ content: null, options: {} }),
    };

    render() {
        const { classes, width, isPortalBreakPoint } = this.props;
        const {
            content,
            options: { hideChildren },
        } = this.state;

        return (
            <PopupAreaContext.Provider value={this.state}>
                <div
                    className={classes.defaultWrapper}
                    data-state={content && hideChildren ? 'hidden' : 'show'}
                >
                    {this.props.children}
                </div>
                {content &&
                    (isPortalBreakPoint(width)
                        ? ReactDOM.createPortal(
                              <div className={classes.portalWrapper}>{content}</div>,
                              document.getElementById('frame')
                          )
                        : content)}
            </PopupAreaContext.Provider>
        );
    }
}

export const PopupArea = withWidth()(withStyles(styles, { name: 'PopupArea' })(PopupAreaProvider));

export const withPopupArea = Component => props => (
    <PopupAreaContext.Consumer>
        {state => <Component popupArea={state} {...props} />}
    </PopupAreaContext.Consumer>
);
