import style from "./style.js";
import compose from "./compose.js";
import { handleBreakpoints, values } from "./breakpoints.js";
function sizingTransform(value) {
  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}
const width = style({
  prop: "width",
  transform: sizingTransform
});
const maxWidth = (props) => {
  if (props.maxWidth !== void 0 && props.maxWidth !== null) {
    const styleFromPropValue = (propValue) => {
      var _props$theme, _props$theme2;
      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values[propValue];
      if (!breakpoint) {
        return {
          maxWidth: sizingTransform(propValue)
        };
      }
      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== "px") {
        return {
          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
        };
      }
      return {
        maxWidth: breakpoint
      };
    };
    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
  }
  return null;
};
maxWidth.filterProps = ["maxWidth"];
const minWidth = style({
  prop: "minWidth",
  transform: sizingTransform
});
const height = style({
  prop: "height",
  transform: sizingTransform
});
const maxHeight = style({
  prop: "maxHeight",
  transform: sizingTransform
});
const minHeight = style({
  prop: "minHeight",
  transform: sizingTransform
});
style({
  prop: "size",
  cssProperty: "width",
  transform: sizingTransform
});
style({
  prop: "size",
  cssProperty: "height",
  transform: sizingTransform
});
const boxSizing = style({
  prop: "boxSizing"
});
compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
export {
  boxSizing,
  height,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  sizingTransform,
  width
};
