import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import React, { PropsWithChildren, useMemo } from "react";

export const ComponentsMapOffsetContext = React.createContext({
  setComponentsMapOffset: (_offset: number) => void 0,
  componentsMapOffset: 0,
});

export const ComponentsMapOffsetContextProvider = ({
  children,
}: PropsWithChildren<{}>) => {
  const theme = useTheme<BaseThemePropertiesTV>();

  const [componentsMapOffset, setComponentsMapOffset] = React.useState(
    theme?.screen_margin_top
  );

  const contextValue = useMemo(
    () => ({
      componentsMapOffset,
      setComponentsMapOffset,
    }),
    [componentsMapOffset]
  );

  return (
    <ComponentsMapOffsetContext.Provider value={contextValue}>
      {children}
    </ComponentsMapOffsetContext.Provider>
  );
};

export const withComponentsMapOffsetContext = (Component: any) =>
  function ComponentsMapOffsetContextProviderWrapper(props: {}) {
    return (
      <ComponentsMapOffsetContextProvider>
        <Component {...props} />
      </ComponentsMapOffsetContextProvider>
    );
  };

export const withComponentsMapOffsetContextConsumer = (Component: any) =>
  function ComponentsMapOffsetContextConsumerWrapper(props: {}) {
    const { componentsMapOffset } = React.useContext(
      ComponentsMapOffsetContext
    );

    return <Component {...props} componentsMapOffset={componentsMapOffset} />;
  };