import * as React from "react";
import * as R from "ramda";
import { ConfigurationProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfigutaionContext";

import { keysMap } from "./const";

type Props = {
  screenData: {
    styles: Record<string, any>;
    general: Record<string, any>;
    data: {
      target?: string;
      source?: string;
    };
  };
  [key: string]: any;
};

const prepareConfiguration = (
  configuration: Record<string, any>,
  keys: [string]
) => R.compose(R.evolve(keysMap), R.pickAll(keys))(configuration);

export function withConfigurationProvider(Component: React.ComponentType<any>) {
  return function WithConfigurationProvider(props: Props) {
    const styles = props?.screenData?.styles;
    const general = props?.screenData?.general;

    const configurationKeys = React.useMemo(() => R.keys(keysMap), []);

    const configuration = React.useMemo(
      () => prepareConfiguration({ ...general, ...styles }, configurationKeys),
      []
    );

    return (
      <ConfigurationProvider {...{ configuration }}>
        <Component {...props} />
      </ConfigurationProvider>
    );
  };
}