import {
  join as joinResponsiveValues,
  getBreakpoint,
  getBreakpointMediaQuery
} from "@makeswift/controls";
import { useBreakpoints } from "../../runtimes/react/hooks/use-breakpoints";
import { getIndexes } from "./columns";
import { paddingPropertyDataToStyle } from "../../css/padding";
import { marginPropertyDataToStyle } from "../../css/margin";
import { borderRadiusPropertyDataToStyle } from "../../css/border-radius";
import { borderPropertyDataToStyle } from "../../css/border";
import { colorToString } from "./colorToString";
function responsiveStyle(breakpoints, responsiveValues, join, strategy) {
  return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(
    (acc, { deviceId, value }) => {
      const breakpoint = getBreakpoint(breakpoints, deviceId);
      const mediaQuery = getBreakpointMediaQuery(breakpoint);
      return {
        ...acc,
        [mediaQuery]: {
          ...acc[mediaQuery],
          ...value
        }
      };
    },
    {}
  );
}
function useResponsiveStyle(responsiveValues, join, strategy) {
  return responsiveStyle(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(useBreakpoints(), ...args);
}
function responsivePadding(breakpoints, paddingData, defaultValue = {}) {
  return responsiveStyle(
    breakpoints,
    [paddingData],
    ([padding = {}]) => paddingPropertyDataToStyle(
      padding,
      Object.assign(
        { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },
        defaultValue
      )
    )
  );
}
function useResponsivePadding(...args) {
  return responsivePadding(useBreakpoints(), ...args);
}
function responsiveMargin(breakpoints, marginData, defaultValue = {}) {
  return responsiveStyle(
    breakpoints,
    [marginData],
    ([margin = {}]) => marginPropertyDataToStyle(
      margin,
      Object.assign(
        { marginTop: 0, marginRight: "auto", marginBottom: 0, marginLeft: "auto" },
        defaultValue
      )
    )
  );
}
function useResponsiveMargin(...args) {
  return responsiveMargin(useBreakpoints(), ...args);
}
function responsiveBorderRadius(breakpoints, borderRadiusData, defaultValue = {}) {
  return responsiveStyle(
    breakpoints,
    [borderRadiusData],
    ([borderRadius = {}]) => borderRadiusPropertyDataToStyle(
      borderRadius,
      Object.assign(
        {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          borderBottomRightRadius: 0,
          borderBottomLeftRadius: 0
        },
        defaultValue
      )
    )
  );
}
function useResponsiveBorderRadius(...args) {
  return responsiveBorderRadius(useBreakpoints(), ...args);
}
function useResponsiveBorder(borderData, defaultValue = {}) {
  return useResponsiveStyle(
    [borderData],
    ([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] = 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(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 ? 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(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(useBreakpoints(), ...args);
}
export {
  responsiveBorderRadius,
  responsiveGridItem,
  responsiveMargin,
  responsivePadding,
  responsiveShadow,
  responsiveStyle,
  responsiveTextStyle,
  responsiveWidth,
  useResponsiveBorder,
  useResponsiveBorderRadius,
  useResponsiveGridItem,
  useResponsiveMargin,
  useResponsivePadding,
  useResponsiveShadow,
  useResponsiveStyle,
  useResponsiveTextStyle,
  useResponsiveWidth
};
//# sourceMappingURL=responsive-style.js.map