import React, { PureComponent } from "react";
import {
	View,
	Modal,
	TouchableWithoutFeedback,
	KeyboardAvoidingView,
	Platform,
} from "react-native";
import { withSafeAreaInsets } from "react-native-safe-area-context";

class MiddlePopup extends PureComponent {
	render() {
		const bottom =
			Platform.OS === "android" ? (this.props.insets?.bottom ?? 0) : 0;

		return (
			<Modal
				visible={this.props.visible}
				transparent
				animationType="fade"
				onRequestClose={this.props.onClose}
			>
				<KeyboardAvoidingView
					behavior={
						this.props.keyboardAvoid && Platform.OS === "ios" && "padding"
					}
					style={styles.popup}
				>
					<TouchableWithoutFeedback onPress={this.props.onClose}>
						<View style={styles.popupOverlay} />
					</TouchableWithoutFeedback>
					<View
						style={[
							styles.popupContent,
							this.props.style,
							bottom > 0 && { paddingBottom: bottom },
						]}
					>
						{this.props.children}
					</View>
				</KeyboardAvoidingView>
			</Modal>
		);
	}
}

const styles = {
	popup: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
	},
	popupOverlay: {
		position: "absolute",
		backgroundColor: "rgba(19, 19, 26, .25)",
		top: 0,
		left: 0,
		right: 0,
		bottom: 0,
	},
	popupContent: {
		borderRadius: 12,
		backgroundColor: "#fff",
		alignItems: "center",
	},
};

const MiddlePopupWithInsets = withSafeAreaInsets(MiddlePopup);
export { MiddlePopupWithInsets as MiddlePopup };
