import React, { useRef } from "react";
import type { ComponentProps } 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 type { ContentOverlayRef } from "@jobber/components-native";
import {
  Button,
  ContentOverlay,
  Heading,
  Text,
} from "@jobber/components-native";

type ContentOverlayProps = ComponentProps<typeof ContentOverlay>;

export function ContentOverlayBasic(props: Partial<ContentOverlayProps>) {
  const contentOverlayRef = useRef<ContentOverlayRef>(null);

  const openContentOverlay = () => {
    contentOverlayRef.current?.open?.();
  };

  const closeContentOverlay = () => {
    contentOverlayRef.current?.close?.();
  };

  return (
    <SafeAreaProvider>
      <BottomSheetModalProvider>
        <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Heading>Basic ContentOverlay</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 Content Overlay" onPress={openContentOverlay} />
          <Button label="Close Content Overlay" onPress={closeContentOverlay} />
        </View>
        <ContentOverlay
          ref={contentOverlayRef}
          title="Content Overlay Title"
          onClose={() => action("console.log")("closed content overlay")}
          onOpen={() => action("console.log")("opened content overlay")}
          {...props}
        >
          <View style={{ padding: 16 }}>
            <Text>This is the content inside the overlay.</Text>
          </View>
        </ContentOverlay>
      </BottomSheetModalProvider>
    </SafeAreaProvider>
  );
}