/// <reference types="@applicaster/applicaster-types" />
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import React, { useCallback, useEffect, useMemo, useState } from "react";
import { View, StyleSheet, Keyboard } from "react-native";

import { Overlay } from "./Overlay";
import { ModalBottomSheetFrame } from "./ModalBottomSheetFrame";
import {
  useIsTablet,
  useNavigation,
} from "@applicaster/zapp-react-native-utils/reactHooks";
import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
import { ModalComponent } from "@applicaster/zapp-react-native-ui-components/Components";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
  },
});

type Props = {
  ModalBottomSheetContent:
    | React.FC<ModalBottomSheetContentProps>
    | React.ComponentClass<ModalBottomSheetContentProps>;
  modalBottomSheetContentProps: Record<string, any>;
};

const defaultBottomOffset = platformSelect({
  ios: 34,
  android: 0,
});

export function ModalBottomSheet(props: Props) {
  const theme = useTheme<BaseThemePropertiesMobile>();
  const navigator = useNavigation();
  const dimensions = useDimensions();
  const [sheetHeight, setSheetHeight] = useState(0);
  const [visible, setVisible] = useState(true);
  const dismiss = () => setVisible(false);
  const { bottom = defaultBottomOffset } = useSafeAreaInsets();

  const bottomOffset = bottom + dimensions.statusBarHeight;

  const {
    modal_bottom_sheet_background_color: sheetBackgroundColor,
    modal_bottom_sheet_overlay_color: sheetOverlayColor,
    modal_bottom_sheet_top_corner_radius: sheetCornerRadius,
    modal_bottom_sheet_max_height: sheetMaxHeight,
    modal_bottom_sheet_handle: sheetHandleEnabled,
    modal_bottom_sheet_handle_color: sheetHandleColor,
    modal_bottom_sheet_handle_focus_color: sheetHandleFocusedColor,
    modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
  } = theme;

  const {
    ModalBottomSheetContent = ModalComponent,
    modalBottomSheetContentProps,
  } = props;

  const onLayout = useCallback(({ nativeEvent }) => {
    const calculatedHeight = nativeEvent?.layout?.height;

    if (calculatedHeight > 0 && sheetHeight === 0) {
      setSheetHeight(Math.min(calculatedHeight, sheetMaxHeight));
    }
  }, []);

  useEffect(() => {
    Keyboard.dismiss();
  }, []);

  const isTablet = useIsTablet();

  const maxWidth = useMemo(
    () =>
      isTablet
        ? Math.max(sheetTabletMaxWidth, dimensions.width)
        : dimensions.width,
    [isTablet]
  );

  return (
    <View style={styles.container}>
      <Overlay
        visible={visible}
        overlayColor={sheetOverlayColor}
        closeToast={dismiss}
      />
      <ModalBottomSheetFrame
        backgroundColor={sheetBackgroundColor}
        cornerRadius={sheetCornerRadius}
        contentHeight={sheetHeight + bottomOffset}
        maxHeight={sheetMaxHeight + bottomOffset}
        paddingBottom={bottomOffset}
        maxWidth={maxWidth}
        dimensions={dimensions}
        visible={visible && sheetHeight > 0}
        closeToast={dismiss}
        handleProps={{
          enabled: sheetHandleEnabled,
          color: sheetHandleColor,
          focusedColor: sheetHandleFocusedColor,
        }}
      >
        <View onLayout={onLayout}>
          <ModalBottomSheetContent
            width={
              Math.min(sheetTabletMaxWidth, dimensions.width) ||
              dimensions.width
            }
            maxHeight={sheetMaxHeight}
            {...modalBottomSheetContentProps}
            dismiss={dismiss}
            currentRoute={navigator.currentRoute}
          />
        </View>
      </ModalBottomSheetFrame>
    </View>
  );
}