import React, { useRef } from "react";
import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { action } from "storybook/actions";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import {
  BottomSheet,
  BottomSheetOption,
  Button,
  Heading,
  Text,
} from "@jobber/components-native";
import type { BottomSheetRef } from "@jobber/components-native";

export function BottomSheetBasicExample() {
  const bottomSheetRef = useRef<BottomSheetRef>(null);

  return (
    <SafeAreaProvider>
      <BottomSheetModalProvider>
        <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Heading>Basic BottomSheet</Heading>
          <Text>
            Note that due to the differences between React Native Web and React
            Native, this does not render 100% properly
          </Text>
          <Button
            label="Open Bottom Sheet"
            onPress={() => bottomSheetRef.current?.open()}
          />
          <Button
            label="Close Bottom Sheet"
            onPress={() => bottomSheetRef.current?.close()}
          />
        </View>
        <BottomSheet
          ref={bottomSheetRef}
          onClose={() => action("console.log")("closed bottom sheet")}
          onOpen={() => action("console.log")("opened bottom sheet")}
        >
          <BottomSheetOption
            icon="sendMessage"
            iconColor="greyBlue"
            text="Send message"
            onPress={() => action("alert")("send message")}
          />
          <BottomSheetOption
            icon="phone"
            iconColor="greyBlue"
            text="Call a friend"
            onPress={() => action("alert")("Calling a friend")}
          />
          <BottomSheetOption
            destructive={true}
            icon="trash"
            text="Remove"
            onPress={() => action("alert")("Removed")}
          />
        </BottomSheet>
      </BottomSheetModalProvider>
    </SafeAreaProvider>
  );
}