import { getSpacingValue } from "../../utils";
import { filterUndefinedProps } from "../../utils/filterUndefinedProps";
import type { FlexNonStyleProps, FlexProps, FlexStyleProps } from "./types";

export const buildFlexStyles = (props: FlexStyleProps) => {
  const {
    flexDirection,
    flexWrap,
    flexGrow,
    flex,
    justifyContent,
    alignItems,
    alignContent,
    gap,
    rowGap,
    columnGap,
  } = props;

  const styleProps = {
    flexDirection,
    flexWrap,
    flexGrow,
    flex,
    justifyContent,
    alignItems,
    alignContent,
    gap: getSpacingValue(gap),
    columnGap: getSpacingValue(columnGap),
    rowGap: getSpacingValue(rowGap),
  };

  return filterUndefinedProps(styleProps);
};

export const splitProps = (
  props: FlexProps,
): [FlexStyleProps, FlexNonStyleProps] => {
  const {
    flexDirection,
    flexWrap,
    flexGrow,
    flex,
    justifyContent,
    alignItems,
    alignContent,
    gap,
    rowGap,
    columnGap,
    ...otherProps
  } = props;

  return [
    {
      flexDirection,
      flexWrap,
      flexGrow,
      flex,
      justifyContent,
      alignItems,
      alignContent,
      gap,
      rowGap,
      columnGap,
    },
    otherProps,
  ];
};
