"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var responsive_style_exports = {};
__export(responsive_style_exports, {
  responsiveBorderRadius: () => responsiveBorderRadius,
  responsiveGridItem: () => responsiveGridItem,
  responsiveMargin: () => responsiveMargin,
  responsivePadding: () => responsivePadding,
  responsiveShadow: () => responsiveShadow,
  responsiveStyle: () => responsiveStyle,
  responsiveTextStyle: () => responsiveTextStyle,
  responsiveWidth: () => responsiveWidth,
  useResponsiveBorder: () => useResponsiveBorder,
  useResponsiveBorderRadius: () => useResponsiveBorderRadius,
  useResponsiveGridItem: () => useResponsiveGridItem,
  useResponsiveMargin: () => useResponsiveMargin,
  useResponsivePadding: () => useResponsivePadding,
  useResponsiveShadow: () => useResponsiveShadow,
  useResponsiveStyle: () => useResponsiveStyle,
  useResponsiveTextStyle: () => useResponsiveTextStyle,
  useResponsiveWidth: () => useResponsiveWidth
});
module.exports = __toCommonJS(responsive_style_exports);
var import_controls = require("@makeswift/controls");
var import_use_breakpoints = require("../../runtimes/react/hooks/use-breakpoints");
var import_columns = require("./columns");
var import_padding = require("../../css/padding");
var import_margin = require("../../css/margin");
var import_border_radius = require("../../css/border-radius");
var import_border = require("../../css/border");
var import_colorToString = require("./colorToString");
function responsiveStyle(breakpoints, responsiveValues, join, strategy) {
  return (0, import_controls.join)(breakpoints, responsiveValues, join, strategy).reduce(
    (acc, { deviceId, value }) => {
      const breakpoint = (0, import_controls.getBreakpoint)(breakpoints, deviceId);
      const mediaQuery = (0, import_controls.getBreakpointMediaQuery)(breakpoint);
      return {
        ...acc,
        [mediaQuery]: {
          ...acc[mediaQuery],
          ...value
        }
      };
    },
    {}
  );
}
function useResponsiveStyle(responsiveValues, join, strategy) {
  return responsiveStyle((0, import_use_breakpoints.useBreakpoints)(), responsiveValues, join, strategy);
}
function responsiveWidth(breakpoints, widthData, defaultValue = "100%") {
  return {
    maxWidth: "100%",
    ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({
      width: typeof width === "object" ? `${width.value}${width.unit}` : width
    }))
  };
}
function useResponsiveWidth(...args) {
  return responsiveWidth((0, import_use_breakpoints.useBreakpoints)(), ...args);
}
function responsivePadding(breakpoints, paddingData, defaultValue = {}) {
  return responsiveStyle(
    breakpoints,
    [paddingData],
    ([padding = {}]) => (0, import_padding.paddingPropertyDataToStyle)(
      padding,
      Object.assign(
        { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },
        defaultValue
      )
    )
  );
}
function useResponsivePadding(...args) {
  return responsivePadding((0, import_use_breakpoints.useBreakpoints)(), ...args);
}
function responsiveMargin(breakpoints, marginData, defaultValue = {}) {
  return responsiveStyle(
    breakpoints,
    [marginData],
    ([margin = {}]) => (0, import_margin.marginPropertyDataToStyle)(
      margin,
      Object.assign(
        { marginTop: 0, marginRight: "auto", marginBottom: 0, marginLeft: "auto" },
        defaultValue
      )
    )
  );
}
function useResponsiveMargin(...args) {
  return responsiveMargin((0, import_use_breakpoints.useBreakpoints)(), ...args);
}
function responsiveBorderRadius(breakpoints, borderRadiusData, defaultValue = {}) {
  return responsiveStyle(
    breakpoints,
    [borderRadiusData],
    ([borderRadius = {}]) => (0, import_border_radius.borderRadiusPropertyDataToStyle)(
      borderRadius,
      Object.assign(
        {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          borderBottomRightRadius: 0,
          borderBottomLeftRadius: 0
        },
        defaultValue
      )
    )
  );
}
function useResponsiveBorderRadius(...args) {
  return responsiveBorderRadius((0, import_use_breakpoints.useBreakpoints)(), ...args);
}
function useResponsiveBorder(borderData, defaultValue = {}) {
  return useResponsiveStyle(
    [borderData],
    ([border = {}]) => (0, import_border.borderPropertyDataToStyle)(
      border,
      Object.assign(
        {
          borderTop: "0px solid black",
          borderRight: "0px solid black",
          borderBottom: "0px solid black",
          borderLeft: "0px solid black"
        },
        defaultValue
      )
    )
  );
}
const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
function responsiveGridItem(breakpoints, props) {
  return {
    display: "flex",
    ...responsiveStyle(
      breakpoints,
      [props.grid, props.columnGap, props.rowGap],
      ([
        { spans, count } = { spans: [[12]], count: 12 },
        columnGap = { value: 0, unit: "px" },
        rowGap = { value: 0, unit: "px" }
      ]) => {
        const [rowIndex, columnIndex] = (0, import_columns.getIndexes)(spans, props.index);
        const firstCol = columnIndex === 0;
        const lastCol = columnIndex === spans[rowIndex].length - 1;
        const span = spans[rowIndex][columnIndex];
        const fraction = floor(5)(span / count);
        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
        const iePrecisionError = "0.01px";
        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
        const firstRow = rowIndex === 0;
        const lastRow = rowIndex === spans.length - 1;
        return span === 0 ? { display: "none" } : {
          flexBasis,
          minWidth: flexBasis,
          // NOTE: IE11 width breaks without max width
          // https://github.com/philipwalton/flexbugs/issues/3
          maxWidth: flexBasis,
          paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
          paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
          paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
          paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
        };
      }
    )
  };
}
function useResponsiveGridItem(...args) {
  return responsiveGridItem((0, import_use_breakpoints.useBreakpoints)(), ...args);
}
const getBoxShadow = (shadows) => shadows.map(
  ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(
    1
  )}px ${blurRadius}px ${spreadRadius}px ${color != null ? (0, import_colorToString.colorToString)(color) : "rgba(0,0,0,0.2)"}`
).filter(Boolean).join();
function responsiveShadow(breakpoints, value) {
  return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({
    boxShadow: getBoxShadow(shadow)
  }));
}
function useResponsiveShadow(...args) {
  return responsiveShadow((0, import_use_breakpoints.useBreakpoints)(), ...args);
}
function responsiveTextStyle(breakpoints, value) {
  return responsiveStyle(
    breakpoints,
    [value],
    ([
      textStyle = {
        fontFamily: null,
        letterSpacing: null,
        fontSize: null,
        fontWeight: null,
        textTransform: [],
        fontStyle: []
      }
    ]) => {
      const {
        fontSize,
        fontWeight,
        fontStyle = [],
        textTransform = [],
        letterSpacing,
        fontFamily
      } = textStyle;
      return {
        ...fontFamily == null ? {} : { fontFamily: `"${fontFamily}"` },
        ...fontWeight == null ? {} : { fontWeight },
        ...letterSpacing == null ? {} : { letterSpacing },
        ...fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` },
        ...textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {},
        ...fontStyle.includes("italic") ? { fontStyle: "italic" } : {}
      };
    }
  );
}
function useResponsiveTextStyle(...args) {
  return responsiveTextStyle((0, import_use_breakpoints.useBreakpoints)(), ...args);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  responsiveBorderRadius,
  responsiveGridItem,
  responsiveMargin,
  responsivePadding,
  responsiveShadow,
  responsiveStyle,
  responsiveTextStyle,
  responsiveWidth,
  useResponsiveBorder,
  useResponsiveBorderRadius,
  useResponsiveGridItem,
  useResponsiveMargin,
  useResponsivePadding,
  useResponsiveShadow,
  useResponsiveStyle,
  useResponsiveTextStyle,
  useResponsiveWidth
});
//# sourceMappingURL=responsive-style.js.map