"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 typography_exports = {};
__export(typography_exports, {
  default: () => useEnhancedTypography,
  getTypographyStyleSwatchIds: () => getTypographyStyleSwatchIds,
  typographyCss: () => typographyCss,
  typographyFragementToTypographyControlData: () => typographyFragementToTypographyControlData,
  useTypographyClassName: () => useTypographyClassName
});
module.exports = __toCommonJS(typography_exports);
var import_controls = require("@makeswift/controls");
var import_makeswift_api = require("../hooks/makeswift-api");
var import_colorToString = require("../../../components/utils/colorToString");
var import_responsive_style = require("../../../components/utils/responsive-style");
var import_isNonNullable = require("../../../utils/isNonNullable");
var import_use_style = require("../use-style");
var import_use_breakpoints = require("../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(import_isNonNullable.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((0, import_makeswift_api.useTypography)(data?.id ?? null));
  const source = typography?.style ?? [];
  const override = data?.style ?? [];
  const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
  const swatchIds = [
    ...getTypographyStyleSwatchIds(data?.style),
    ...getTypographyStyleSwatchIds(typography?.style)
  ];
  const swatches = (0, import_makeswift_api.useSwatches)(swatchIds).filter(import_isNonNullable.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 = (0, import_controls.findBreakpointOverride)(breakpoints, enhancedSource, deviceId)?.value;
    const deviceOverride = (0, import_controls.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(import_isNonNullable.isNonNullable);
}
function typographyToCssObject(value) {
  let styles = {};
  if (value.color != null)
    styles.color = (0, import_colorToString.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 (0, import_responsive_style.responsiveStyle)(
    breakpoints,
    [style],
    ([value]) => value !== void 0 ? typographyToCssObject(value) : {},
    import_controls.shallowMergeFallbacks
  );
}
function useTypographyClassName(value) {
  const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
  return (0, import_use_style.useStyle)(typographyCss(breakpoints, value));
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  getTypographyStyleSwatchIds,
  typographyCss,
  typographyFragementToTypographyControlData,
  useTypographyClassName
});
//# sourceMappingURL=typography.js.map