import * as React from "react";
import * as R from "ramda";

import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";

type ReducerState = {
  screenMarginTop: number;
  screenMarginBottom: number;
  screenHeight: number;
  screenWidth: number;
  componentAnchorPointY: number;
  componentAvailableWidth: number;
  extraAnchorPointYOffset: number;
};

type ReducerActionPayload = {
  screenMarginTop?: number;
  screenMarginBottom?: number;
  screenHeight?: number;
  screenWidth?: number;
  componentAnchorPointY?: number;
  componentAvailableWidth?: number;
  extraAnchorPointYOffset: number;
};

type Theme = {
  screen_margin_top?: number;
  screen_margin_bottom?: number;
  component_anchor_point_y?: number;
};

type Reducer = (
  state: ReducerState,
  payload: ReducerActionPayload
) => ReducerState;

const reducer: Reducer = (state, payload) =>
  R.equals(state, payload) ? state : R.mergeRight(state, payload);

export function ScreenLayoutContextProvider(props: {
  children: React.ReactChild;
}) {
  const theme: Theme = useTheme();

  const initialState = React.useMemo(() => {
    return {
      screenMarginTop: theme?.screen_margin_top,
      screenMarginBottom: theme?.screen_margin_bottom,
      screenWidth: 1920,
      screenHeight: 1080,
      componentAnchorPointY: theme?.component_anchor_point_y,
      componentAvailableWidth: 1920,
      extraAnchorPointYOffset: 0,
    };
  }, []);

  const [screenLayout, setScreenLayout] = React.useReducer(
    reducer,
    initialState
  );

  const resetScreenLayout = React.useCallback(() => {
    setScreenLayout(initialState);
  }, [initialState]);

  const screenLayoutValue = React.useMemo(
    () => ({
      ...screenLayout,
      setScreenLayout,
      resetScreenLayout,
    }),
    [screenLayout]
  );

  return (
    <ScreenLayoutContext.Provider value={screenLayoutValue}>
      {props.children}
    </ScreenLayoutContext.Provider>
  );
}