import type { ReactNode } from "react";
import React, { useCallback, useImperativeHandle, useRef } from "react";
import { Keyboard, Platform, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { FullWindowOverlay } from "react-native-screens";
import {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
import { tokens } from "@jobber/design";
import { useStyles } from "./BottomSheet.style";
import { BottomSheetOption } from "./components/BottomSheetOption";
import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
import {
  AtlantisThemeContextProvider,
  useAtlantisTheme,
} from "../AtlantisThemeContext";
import { Divider } from "../Divider";
import { Heading } from "../Heading";
import { useIsScreenReaderEnabled } from "../hooks";
import { useAtlantisI18n } from "../hooks/useAtlantisI18n";

export interface BottomSheetProps {
  readonly children: ReactNode;

  /**
   * Display a cancel button in the bottom sheet footer.
   */
  readonly showCancel?: boolean;

  /**
   * Hide or show the cancel button when loading state is provided.
   */
  readonly loading?: boolean;

  /**
   * An optional heading to display in the bottom sheet header.
   */
  readonly heading?: string;

  /**
   * Callback that is called when the overlay is opened.
   */
  readonly onOpen?: () => void;

  /**
   * Callback that is called when the overlay is closed.
   */
  readonly onClose?: () => void;
}

export interface BottomSheetRef {
  open: () => void;
  close: () => void;
}

// eslint-disable-next-line max-statements
export function BottomSheet({
  children,
  showCancel,
  loading = false,
  heading,
  onOpen,
  onClose,
  ref,
}: BottomSheetProps & { readonly ref?: React.Ref<BottomSheetRef> }) {
  const styles = useStyles();
  const { effectiveTheme } = useAtlantisTheme();
  const isScreenReaderEnabled = useIsScreenReaderEnabled();

  const cancellable = (showCancel && !loading) || isScreenReaderEnabled;

  const { t } = useAtlantisI18n();
  const insets = useSafeAreaInsets();
  const previousIndexRef = useRef(-1);
  const bottomSheetRef = useRef<BottomSheetModal>(null);
  const { handleSheetPositionChange } =
    useBottomSheetBackHandler(bottomSheetRef);

  useImperativeHandle(ref, () => ({
    open: () => {
      dismissKeyboard();
      bottomSheetRef.current?.present();
    },
    close: () => {
      close();
    },
  }));

  const close = useCallback(() => {
    bottomSheetRef.current?.dismiss();
  }, []);

  const handleChange = (index: number) => {
    // Handle Android back button
    handleSheetPositionChange(index);

    const previousIndex = previousIndexRef.current;

    if (previousIndex === -1 && index >= 0) {
      onOpen?.();
    }

    previousIndexRef.current = index;
  };

  return (
    <BottomSheetModal
      ref={bottomSheetRef}
      backdropComponent={Backdrop}
      containerComponent={Platform.OS === "ios" ? Container : undefined}
      backgroundStyle={styles.background}
      enablePanDownToClose={true}
      onChange={handleChange}
      onDismiss={() => {
        previousIndexRef.current = -1;
        dismissKeyboard();
        onClose?.();
      }}
      keyboardBlurBehavior="restore"
      handleStyle={styles.handle}
    >
      {/*
        BottomSheetModal renders through a portal mounted outside this
        component's subtree, so AtlantisThemeContext is lost. Re-apply the
        active effective theme so descendants continue to resolve the correct
        themed tokens.
      */}
      <AtlantisThemeContextProvider dangerouslyOverrideTheme={effectiveTheme}>
        <BottomSheetView
          style={{
            paddingBottom: insets.bottom + tokens["space-small"],
            paddingTop: tokens["space-small"],
          }}
        >
          {heading && <Header heading={heading} styles={styles} />}
          {children}
          {cancellable && (
            <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
          )}
        </BottomSheetView>
      </AtlantisThemeContextProvider>
    </BottomSheetModal>
  );
}

function Header({
  heading,
  styles,
}: {
  readonly heading: string;
  readonly styles: ReturnType<typeof useStyles>;
}) {
  return (
    <View style={styles.header}>
      <Heading level={"subtitle"}>{heading}</Heading>
    </View>
  );
}

function Footer({
  styles,
  close,
  cancelLabel,
}: {
  readonly styles: ReturnType<typeof useStyles>;
  readonly close: () => void;
  readonly cancelLabel: string;
}) {
  return (
    <View>
      <View style={styles.footerDivider}>
        <Divider />
      </View>

      <BottomSheetOption text={cancelLabel} icon="cross" onPress={close} />
    </View>
  );
}

function dismissKeyboard() {
  //Dismisses the keyboard before opening the bottom sheet.
  //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard
  Keyboard.dismiss();
}

function Backdrop(bottomSheetBackdropProps: BottomSheetBackdropProps) {
  const styles = useStyles();

  return (
    <BottomSheetBackdrop
      {...bottomSheetBackdropProps}
      appearsOnIndex={0}
      disappearsOnIndex={-1}
      style={styles.backdrop}
      opacity={1}
    />
  );
}

function Container({ children }: { readonly children?: ReactNode }) {
  return <FullWindowOverlay>{children}</FullWindowOverlay>;
}