/* eslint-disable react/display-name */
import React, { useState } from "reactn";
import { Image, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Motion } from "@legendapp/motion";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

import { responsiveHeight } from "../actions/responsiveSizes.js";

import { Fonts, gutters } from "../styles";

import BaseHeader from "../components/BaseHeader";
import NavigateHeader from "../components/NavigateHeader";

import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
import { useUserData } from "../providers/UserDataProvider.js";
import { background } from "../assets/index.js";

export default ({
  children,

  topStickyContent = null,
  bottomStickyContent = null,

  title = "",
  rightComponent = null,

  containerType = "SAFE_AREA_VIEW",
  headerType = "BASE",

  containerStyle = {},
  headerStyle = {},
  contentContainerStyle = {},

  scrollEnabled = false,

  onBackPressed = null,
  backgroundImg = background.writingBG,
  headerTitleStyle = {},
  hideBackButton = false,
}) => {
  const { currentUID } = useUserData();

  const [scrollPosition, setScrollPosition] = useState(0);

  const PageContainer =
    containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;

  const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;

  const handleScroll = (event) => {
    const position = event.nativeEvent.contentOffset.y;
    setScrollPosition(position);
  };

  return (
    <>
      <Image
        source={backgroundImg}
        style={{ width: "100%", height: "100%", position: "absolute" }}
      />
      <PageContainer
        {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
        style={{
          height: "100%",
          paddingTop: isWeb ? gutters / 2 : 0,
          padding: gutters,
          paddingBottom: 0,
          ...(isWeb ? { maxHeight: "100vh" } : {}),
          ...(!currentUID && isDesktop
            ? { maxWidth: 500, alignSelf: "center" }
            : {}),
          ...containerStyle,
        }}
      >
        {headerType !== "NONE" ? (
          headerType === "BASE" ? (
            <BaseHeader containerStyle={{ ...headerStyle }} />
          ) : (
            <NavigateHeader
              containerStyle={{ ...headerStyle }}
              title={title}
              rightComponent={rightComponent}
              onBackPressed={onBackPressed}
              headerTitleStyle={headerTitleStyle}
              hideBackButton={hideBackButton}
            />
          )
        ) : null}

        {topStickyContent?.()}

        <ContentContainer
          style={{ flex: 1, ...contentContainerStyle }}
          {...(scrollEnabled
            ? {
                onScroll: handleScroll,
                scrollEventThrottle: 80,
                showsVerticalScrollIndicator: false,
                contentContainerStyle: { paddingBottom: responsiveHeight(55) },
                keyboardDismissMode: "on-drag",
              }
            : {})}
        >
          {children}
        </ContentContainer>
      </PageContainer>

      {bottomStickyContent?.()}
    </>
  );
};
