import { BlurView } from "expo-blur";
import React from "react";
import { Platform } from "react-native";
import ActionSheet from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { isWeb } from "../hooks/useLayoutType";
import { gutters, Palette } from "../styles";

const AppActionSheet = ({ children, props }) => {
  const insets = useSafeAreaInsets();
  return (
    <ActionSheet
      containerStyle={{ backgroundColor: Palette.tran }}
      gestureEnabled
      indicatorStyle={{
        top: 20,
        width: 50,
        zIndex: 2,
      }}
      {...props}
    >
      <BlurView
        intensity={Platform.OS === "ios" || isWeb ? 20 : 10}
        style={{
          paddingTop: 36,
          paddingHorizontal: 14,
          paddingBottom: gutters + (insets?.bottom || 0),
          backgroundColor: Palette.glass,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          overflow: "hidden",
        }}
        // experimentalBlurMethod={
        //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
        // }
      >
        {children}
      </BlurView>
    </ActionSheet>
  );
};

export default AppActionSheet;