import { ReactNode } from "react";
import { View, StyleProp, ViewStyle } from "react-native";
import { Dialog, Portal } from "react-native-paper";

import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";

interface DialogContainerProps {
  visible: boolean;
  onDismiss: () => void;
  dialogStyle?: StyleProp<ViewStyle>;
  children: ReactNode;
}

export const DialogContainer = ({
  visible,
  onDismiss,
  dialogStyle,
  children,
}: DialogContainerProps) => {
  const isMobile = useAppSelector(selectIsMobile);
  const dialogWidth = isMobile ? "95%" : "60%";

  return (
    <Portal>
      <View className="flex-1" pointerEvents="box-none">
        <Dialog
          visible={visible}
          onDismiss={onDismiss}
          style={[{ width: dialogWidth, alignSelf: "center" }, dialogStyle]}
        >
          {children}
        </Dialog>
      </View>
    </Portal>
  );
};