import {
  findBreakpointOverride,
  shallowMergeFallbacks
} from "@makeswift/controls";
import { useSwatches, useTypography } from "../hooks/makeswift-api";
import { colorToString } from "../../../components/utils/colorToString";
import { responsiveStyle } from "../../../components/utils/responsive-style";
import { isNonNullable } from "../../../utils/isNonNullable";
import { useStyle } from "../use-style";
import { useBreakpoints } from "../hooks/use-breakpoints";
function typographyFragementToTypographyControlData(fragment) {
  if (fragment == null)
    return void 0;
  return {
    id: fragment.id,
    style: fragment.style.map(({ deviceId, value }) => ({
      deviceId,
      value: {
        fontFamily: value.fontFamily ?? void 0,
        lineHeight: value.lineHeight ?? void 0,
        letterSpacing: value.letterSpacing ?? void 0,
        fontWeight: value.fontWeight ?? void 0,
        textAlign: value.textAlign ?? void 0,
        uppercase: value.uppercase ?? void 0,
        underline: value.underline ?? void 0,
        strikethrough: value.strikethrough ?? void 0,
        italic: value.italic ?? void 0,
        fontSize: value.fontSize ?? void 0,
        color: value.color ?? void 0
      }
    }))
  };
}
function getTypographyStyleSwatchIds(style) {
  return style?.map((override) => override.value).flatMap((typographyStyle) => typographyStyle.color?.swatchId).filter(isNonNullable) ?? [];
}
const withColor = (swatches) => (deviceRawTypographyValue) => {
  const { value, deviceId } = deviceRawTypographyValue;
  if (value.color == null) {
    const { color, ...nextValue } = value;
    return {
      deviceId,
      value: nextValue
    };
  }
  return {
    deviceId,
    value: {
      ...value,
      color: {
        swatch: swatches.find((s) => s && s.id === value.color?.swatchId),
        alpha: value.color?.alpha ?? void 0
      }
    }
  };
};
const getDeviceId = ({ deviceId }) => deviceId;
function useEnhancedTypography(data) {
  const typography = typographyFragementToTypographyControlData(useTypography(data?.id ?? null));
  const source = typography?.style ?? [];
  const override = data?.style ?? [];
  const breakpoints = useBreakpoints();
  const swatchIds = [
    ...getTypographyStyleSwatchIds(data?.style),
    ...getTypographyStyleSwatchIds(typography?.style)
  ];
  const swatches = useSwatches(swatchIds).filter(isNonNullable);
  const enhancedSource = source.map(withColor(swatches));
  const enhancedOverride = override.map(withColor(swatches));
  const devices = [
    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId)))
  ];
  return devices.map((deviceId) => {
    const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value;
    const deviceOverride = findBreakpointOverride(
      breakpoints,
      enhancedOverride,
      deviceId,
      (v) => v
    )?.value;
    if (deviceSource && deviceOverride) {
      return {
        deviceId,
        value: { ...deviceSource, ...deviceOverride }
      };
    } else if (deviceOverride) {
      return {
        deviceId,
        value: deviceOverride
      };
    } else if (deviceSource) {
      return {
        deviceId,
        value: deviceSource
      };
    }
    return null;
  }).filter(isNonNullable);
}
function typographyToCssObject(value) {
  let styles = {};
  if (value.color != null)
    styles.color = colorToString(value.color);
  if (value.fontFamily != null)
    styles.fontFamily = value.fontFamily;
  if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)
    styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`;
  if (value.fontWeight != null)
    styles.fontWeight = value.fontWeight;
  if (value.lineHeight != null)
    styles.lineHeight = value.lineHeight;
  if (value.letterSpacing != null)
    styles.letterSpacing = `${value.letterSpacing / 10}em`;
  if (value.uppercase != null)
    styles.textTransform = value.uppercase === true ? "uppercase" : "initial";
  if (value.underline != null || value.strikethrough != null)
    styles.textDecoration = [
      Boolean(value.underline) && "underline",
      Boolean(value.strikethrough) && "line-through"
    ].filter(Boolean).join(" ");
  if (value.italic != null)
    styles.fontStyle = value.italic === true ? "italic" : "initial";
  return styles;
}
function typographyCss(breakpoints, style) {
  return responsiveStyle(
    breakpoints,
    [style],
    ([value]) => value !== void 0 ? typographyToCssObject(value) : {},
    shallowMergeFallbacks
  );
}
function useTypographyClassName(value) {
  const breakpoints = useBreakpoints();
  return useStyle(typographyCss(breakpoints, value));
}
export {
  useEnhancedTypography as default,
  getTypographyStyleSwatchIds,
  typographyCss,
  typographyFragementToTypographyControlData,
  useTypographyClassName
};
//# sourceMappingURL=typography.js.map