import { BoxProps } from "design-system/primitives/Box/Box";
import { MarginStyles, PaddingStyles, SpaceKey, RadiusStyles } from "design-system/theme/types";
import { mapValues } from "lodash";
import { StyleProp } from "react-native";
import { useInternalTheme } from "design-system/hooks/useInternalTheme";

export type RemoveStyles<T> = Omit<T, "contentContainerStyle" | "style">;
export type FilterStyles<T> = StyleProp<
  Omit<T, MarginStyles | PaddingStyles | RadiusStyles | "backgroundColor">
>;

export type ScrollableBoxProps = Pick<
  BoxProps,
  "flex" | "backgroundColor" | RadiusStyles | PaddingStyles | MarginStyles
>;

export function useResolveBoxListTokens<T extends ScrollableBoxProps>(props: T) {
  const {
    flex,
    backgroundColor,

    borderTopLeftRadius,
    borderBottomLeftRadius,
    borderBottomRadius,
    borderBottomRightRadius,
    borderLeftRadius,
    borderRadius,
    borderRightRadius,
    borderTopRadius,
    borderTopRightRadius,

    padding,
    paddingBottom,
    paddingHorizontal,
    paddingLeft,
    paddingRight,
    paddingTop,
    paddingVertical,

    // margins
    margin,
    marginBottom,
    marginHorizontal,
    marginLeft,
    marginRight,
    marginTop,
    marginVertical,
    ...rest
  } = props;

  const theme = useInternalTheme();

  const paddingValues = mapValues(
    {
      padding,
      paddingBottom,
      paddingHorizontal,
      paddingLeft,
      paddingRight,
      paddingTop,
      paddingVertical,
    },
    (value) => {
      if (typeof value === "object") {
        return value.custom;
      }
      if (typeof value === "string") {
        if (theme.config.spacing[value] == null) {
          throw new Error(`Padding value: ${value} is not included in the current theme configuration`);
        }
        return theme.config.spacing[value];
      }
    }
  );

  const marginValues = mapValues(
    {
      margin,
      marginBottom,
      marginHorizontal,
      marginLeft,
      marginRight,
      marginTop,
      marginVertical,
    },
    (value) => {
      if (typeof value === "object") {
        if (value.custom == null) {
          return;
        }
        if (typeof value.custom === "number" && value.custom > 0) {
          console.warn(
            "Only negative margins are supported for the Box Component, use padding props, or utilise the Stack or Row components"
          );
          return;
        }
        return value.custom;
      }
      if (value == null || !theme.config.spacing[value?.replace("-", "") as SpaceKey]) {
        return undefined;
      }
      return -1 * theme.config.spacing[value?.replace("-", "") as SpaceKey];
    }
  );

  const colorValues = mapValues({ backgroundColor }, (value) => {
    if (typeof value === "object") {
      return value.custom;
    }
    if (typeof value === "string") {
      return theme.colors[value];
    }
  });

  const borderRadiusValues = mapValues(
    {
      borderBottomLeftRadius:
        borderBottomLeftRadius ?? borderBottomRadius ?? borderLeftRadius ?? borderRadius,
      borderBottomRightRadius:
        borderBottomRightRadius ?? borderBottomRadius ?? borderRightRadius ?? borderRadius,
      borderTopLeftRadius: borderTopLeftRadius ?? borderTopRadius ?? borderLeftRadius ?? borderRadius,
      borderTopRightRadius: borderTopRightRadius ?? borderTopRadius ?? borderRightRadius ?? borderRadius,
    },
    (value) => {
      if (typeof value === "object") {
        return value.custom;
      }
      if (typeof value === "string") {
        return theme.config.radius[value];
      }
    }
  );

  const contentContainerStyles = { flexGrow: flex, ...paddingValues };
  const styles = { flex, ...borderRadiusValues, ...colorValues, ...marginValues };

  return { contentContainerStyles, styles, ...rest };
}