import { Theme, WithStyles, withStyles } from '@signatu/styles';
import PropTypes from 'prop-types';
import React from 'react';
import { CSSProperties } from 'react';


export interface PopupProps {
    show: boolean
    preload?: boolean
    onClose: Function
    contentStyle?: CSSProperties
    closeButton?: boolean
}

const styles = (theme: Theme) => ({
    root: {
    }, 
    lightbox: {
        position: 'fixed', 
        display: 'flex', 
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%',
        width: '100%',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 999,
        opacity: '1.0',
        visibility: 'visible', 
        transition: 'opacity 0.5s linear'
    }, 
    hidden: {
        visibility: 'hidden', 
        opacity: 0, 
        transition: 'visibility 0s 0.5s, opacity 0.5s linear'
    }, 

    overlay: {
        position: 'fixed', 
        width: 'auto', 
        height: 'auto', 
        top: 0, 
        left: 0, 
        right: 0, 
        bottom: 0, 
        transform: 'translate(0, 0)', 
        backgroundColor: 'rgba(0,0,0,0.9)'
    }, 
    content: {
        backgroundColor: theme.palette.backgroundColor, 
        maxWidth: "600px", 
        position: 'relative', 
        padding: theme.spacing.unit * 2, 
        opacity: '1.0', 
        zIndex: '1000'
    }, 
    closeButton: {
        
    }

})

class Popup extends React.Component<PopupProps & WithStyles> {
    static propTypes = {
        show: PropTypes.bool.isRequired, 
        contentStyle: PropTypes.string as PropTypes.Validator<CSSProperties | undefined>, 
        onClose: PropTypes.func.isRequired, 
        preload: PropTypes.bool as PropTypes.Validator<boolean | undefined>, 
        closeButton: PropTypes.bool as PropTypes.Validator<boolean | undefined>,
        classes: PropTypes.any
    }

    render() {
        const { classes } = this.props
        const hidden = this.props.show ? "" : classes.hidden
        const content = <div className={`${classes.lightbox} ${hidden}`}> 
            <div className={classes.overlay} onClick={() => {
                this.props.onClose()
            }}/>
            <div className={classes.content} >
                {this.props.children}
            </div>
        </div>
        return <div data-type="Popup">
            {/** Pre-load - wrap in a conditional display div */}
            {this.props.preload && <div data-type="PopupContent" style={{visibility: `${this.props.show ? "visible" : "hidden"}` as any}}>
                {content}
            </div>}
            {/** No pre-load - load this on demand */}
            { ! this.props.preload && <div data-type="PopupContent"> {content} </div>}
            {this.props.closeButton && 
                <button className={classes.closeButton}>Close </button>
            }
        </div>
    }
}

const styled = withStyles<PopupProps>(styles)(Popup)
export { styled as Popup }

