import * as React from "react";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { identity } from "ramda";
import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";

import { withDimensions } from "./utils";

type Source = {
  uri: string;
};

type Style = {
  width: Option<number | string>;
  height: Option<number | string>;
};

const withAppliedDimensions = (style: Style) => (source: Source) => ({
  ...source,
  uri: withDimensions(source?.uri, style?.width, style?.height),
});

export const withDimensionsHOC = (Component) => {
  return function WithDimensions(props: Record<string, unknown>) {
    const theme = useTheme<BaseThemePropertiesMobile>();

    const useDownScalingImages = toBooleanWithDefaultFalse(
      theme.use_downscaling_images
    );

    return (
      <Component
        {...props}
        withDimensions={
          useDownScalingImages
            ? withAppliedDimensions((props?.style || {}) as Style)
            : identity
        }
      />
    );
  };
};