import { asp as g } from "@asp/asp";
import type { FC } from "react";
import { Modal, type ModalProps, View, type ViewProps, type ViewStyle } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

/**
 * A view container that wraps a {@link SafeAreaView} and a {@link SafeAreaProvider}.
 * This is useful for modal components that should be centered and have a safe area.
 *
 * @param {ViewProps} props The props to pass to the {@link View} component.
 * @returns {React.ReactElement} The container component.
 */
export const SafeView: FC<ViewProps> = ({ children, style, ...rest }) => {
	return (
		<SafeAreaProvider>
			<SafeAreaView style={[g.flex_1, g.justify_center, g.align_center, style]} {...rest}>
				{children}
			</SafeAreaView>
		</SafeAreaProvider>
	);
};

/**
 * RnModal is a styled Modal component that provides a basic styling for the
 * inner content of a modal. It centers the content horizontally and vertically
 * and provides a light green background color with rounded corners.
 *
 * @param {JSX.Element | JSX.Element[]} children The content to be rendered
 * inside the modal.
 * @param {ViewStyle} style Optional style overrides for the modal's outer View.
 * @param {ModalProps} rest Optional props.
 *
 * @returns A styled Modal component with the inner content.
 */
export const RnModal: FC<ModalProps & { style?: ViewStyle }> = ({ children, style, ...rest }) => {
	return (
		<Modal animationType="slide" transparent={true} visible={true} {...rest}>
			<View style={[g.flex_1, g.justify_center, g.align_center, style]}>{children}</View>
		</Modal>
	);
};

/**
 * OuterView is a styled View component that provides a basic styling for the
 * inner content of a modal. It centers the content horizontally and vertically
 * and provides a light green background color with rounded corners.
 *
 * @param {JSX.Element | JSX.Element[]} children The content to be rendered
 * inside the modal.
 * @param {ViewProps} style Optional style overrides.
 * @param {ViewProps} rest Optional props.
 *
 * @returns A styled View component with the inner content.
 */
export const OuterView: FC<ViewProps> = ({ children, style, ...rest }) => {
	return (
		<View
			style={[g.rounded_xs, { width: 200, height: 200, backgroundColor: "#cfe3d0ff" }, style]}
			{...rest}
		>
			<View style={[g.flex_1]}>{children}</View>
		</View>
	);
};
