import classNames from "classnames/dedupe";
import type { BoxProps } from "./types";
import {
  filterUndefinedProps,
  filterUnsetValues,
  getSpacingValue,
} from "../../utils";
import "./Box.css";

const Box = ({ ref, ...props }: BoxProps) => {
  const {
    elementType: Element = "div",
    padding,
    paddingX,
    paddingInline,
    paddingInlineStart,
    paddingInlineEnd,
    paddingY,
    paddingBlock,
    paddingBlockStart,
    paddingBlockEnd,
    paddingTop,
    paddingRight,
    paddingBottom,
    paddingLeft,
    minWidth,
    minHeight,
    maxWidth,
    maxHeight,
    width,
    height,
    style,
    ...otherProps
  } = props;

  const classes = classNames("mobius", "mobius-box", otherProps.className);

  const fromProps = filterUndefinedProps({
    padding: getSpacingValue(padding),
    paddingInline: getSpacingValue(paddingInline || paddingX),
    paddingBlock: getSpacingValue(paddingBlock || paddingY),
    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),
    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),
    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),
    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),
    minWidth,
    minHeight,
    maxWidth,
    maxHeight,
    width,
    height,
  });

  const styleProps = filterUndefinedProps({
    ...fromProps,
    ...(style ? filterUnsetValues(style as Record<string, unknown>) : {}),
  });

  return (
    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />
  );
};

Box.displayName = "Box";
export { Box };
