import { SpaceKey } from "design-system/theme/types";
import { useInternalTheme } from "design-system/hooks/useInternalTheme";
import { RemoveStyle } from "design-system/tools/useStyle";
import { mapValues } from "lodash";
import React from "react";
import { View, ViewProps } from "react-native";
import { BoxProps } from "./Box/Box";

type BleedNumber = SpaceKey | { custom: number };
export type BleedProps = RemoveStyle<ViewProps> & {
  children: BoxProps["children"];
  space?: BleedNumber;
  top?: BleedNumber;
  bottom?: BleedNumber;
  left?: BleedNumber;
  right?: BleedNumber;
  horizontal?: BleedNumber;
  vertical?: BleedNumber;
  flex?: number;
};

/**
 * @description Renders a container with negative margins, allowing content
 * to "bleed" into the surrounding layout.
 */
export function Bleed({
  top,
  space,
  bottom,
  left,
  right,
  horizontal,
  vertical,
  children,
  flex,
  ...rest
}: BleedProps) {
  const theme = useInternalTheme();

  const marginValues = mapValues({ space, bottom, horizontal, left, right, top, vertical }, (value) => {
    if (typeof value === "object") {
      return -value.custom;
    }
    if (typeof value === "string") {
      return -1 * theme.config.spacing[value];
    }
  });

  return (
    <View
      style={[
        {
          margin: marginValues.space,
          marginBottom: marginValues.bottom,
          marginHorizontal: marginValues.horizontal,
          marginLeft: marginValues.left,
          marginRight: marginValues.right,
          marginTop: marginValues.top,
          marginVertical: marginValues.vertical,
          flex,
        },
      ]}
      {...rest}
    >
      {children}
    </View>
  );
}