import React from "react";
import { RefreshControl } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { useFocusEffect } from "@react-navigation/native";
import { useTheme } from "@ui-kitten/components";
import { useModel } from "flooks";
import NavHeaderBar from "./NavHeaderBar";
import { initState, refreashReducer } from "../Redux/RefreashRedux";

export default function scrollPage(props) {
  const {
    style,
    enabledFresh,
    refreshEvent,
    statusType,
    navHeaderBarTitle,
    children,
  } = props;
  const [state, dispatch] = React.useReducer(refreashReducer, initState);
  const { refreshing } = state;
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  function onRefresh() {
    dispatch({
      type: "startRefresh",
    });
    if (refreshEvent) {
      refreshEvent()
        .then(() => {
          dispatch({
            type: "refreshFinish",
          });
        })
        .catch(() => {
          dispatch({
            type: "refreshError",
          });
        });
    } else {
      setTimeout(() => {
        dispatch({
          type: "refreshFinish",
        });
      }, 1000);
    }
  }
  useFocusEffect(
    React.useCallback(() => {
      if (enabledFresh && refreshEvent) {
        onRefresh();
      }

      if (statusType === "primary") {
        changeBackground(theme["color-primary-500"]);
      }
    }, [])
  );

  return (
    <>
      {navHeaderBarTitle != null && <NavHeaderBar title={navHeaderBarTitle} />}
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            enabled={enabledFresh || false}
          />
        }
        style={style}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        {children}
      </ScrollView>
    </>
  );
}