import React from 'react';

import { Popup } from '../components/consentPopup';

/** Create a popup when there is no existing consent event */

export const makeConsentPopup = (Component: React.ComponentType<any>): React.ComponentClass<any>  => class extends React.Component<any> {
    state = {
        show: false
    }

    componentWillMount() {
        this.setState({show: this.props.show})
    }
    
    componentWillReceiveProps(props: any) {
        this.setState({show: props.show})
    }

    _isMounted = false
    componentDidMount() {
        this._isMounted = true
    }
    componentWillUnmount() {
        this._isMounted = false
    }

    render() {
        /** We need to pre-load the component, so we cannot have it behind a conditional */
        return <Popup 
            preload={true}
            show={this.state.show}
            onClose={() => {
                if ( ! this._isMounted ) return
                this.setState({show: false})
                this.props.onClose && this.props.onClose()
            }}>
                 <Component {...this.props}/>
        </Popup>
    }
}
