import React from 'react';
import device, { browsers, deviceTypes, operatingSystems } from '../utils/device-browser';
import { barHeight } from '../constants/index';

const height = !device.isStandalone ? (
    !device.isStandalone && device.deviceType === deviceTypes.Mobile && device.os === operatingSystems.iOS ? (
        device.browser === browsers.Safari ? `min(70%, 800px)` : `min(80%, 800px)`
    ) : !device.isStandalone && device.deviceType === deviceTypes.Mobile && device.os === operatingSystems.Android ? `min(calc(85% - ${barHeight}), 800px)` : `min(calc(85% - ${barHeight}), 800px)`
) : 'min(90%, 800px)'
const style: any = {
    maxHeight: height,
}
if (!device.isStandalone && device.deviceType === deviceTypes.Mobile && device.os === operatingSystems.iOS && device.browser === browsers.Chrome) {
    style.top = '.5rem'
    style.left = '.5rem'
    style.transform = 'translateY(0)'
    const width = 'calc(100% - 1rem)'
    style.width = width
    style.maxWidth = width
}
function Popup({ children, removePopup }: { children: React.ReactNode, removePopup?: () => void }) {
    return (<div className="popup">
        <div className="popup-inner">
            <div className="popup-content relative" style={style}>
                {removePopup && <button className="popup-close" onClick={() => removePopup()}>X</button>}
                {children}
            </div>
        </div>
    </div>);
}

export default React.memo(Popup);