import React from "react";

import { getAnalyticsFunctions } from "@applicaster/zapp-react-native-utils/analyticsUtils";
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";

type ComponentProps = {
  component: {
    id: string;
    rules: { item_limit: number; component_cells_selectable: boolean };
    component_type: string;
    styles: {
      cell_style: string;
      header: { visible: boolean };
      component_cells_selectable: boolean;
    };
  };
  zappPipesData: { url: string; data: { title: string } };
  selected: boolean;
  assets: { menu_button: string };
};

function withAnalytics(Component) {
  return function WithAnalytics(props: ComponentProps) {
    const { appData } = usePickFromState(["appData"]);

    const analyticsFunctions = React.useMemo(
      () => getAnalyticsFunctions({ props, appData }),
      [props, appData]
    );

    return (
      <Component
        {...{
          ...props,
          ...analyticsFunctions,
        }}
      />
    );
  };
}

export default withAnalytics;