import { getEnabledBreakpoints } from "../../../core/breakpoints";

export const getPreviewStyles = (styles, previewDevice, previewEnabled = true) => {
  if (!previewDevice || previewDevice === 'pc') {
    return styles;
  }

  const previewStyles = { ...styles };
  const enabledBreakpoints = getEnabledBreakpoints();
  const deviceIndex = enabledBreakpoints.indexOf(previewDevice);

  if (deviceIndex === -1) {
    return styles;
  }

  const resolveValue = (prefix, isHover = "") => {
    for (let i = deviceIndex; i >= 0; i--) {
      const checkKey = `${prefix}${enabledBreakpoints[i]}${isHover}`;
      if (styles[checkKey] !== undefined && styles[checkKey] !== null && styles[checkKey] !== "") {
        return styles[checkKey];
      }
    }
    if (isHover) {
      for (let i = deviceIndex; i >= 0; i--) {
        const checkKey = `${prefix}${enabledBreakpoints[i]}`;
        if (styles[checkKey] !== undefined && styles[checkKey] !== null && styles[checkKey] !== "") {
          return styles[checkKey];
        }
      }
    }
    return null;
  };

  const prefixMap = new Map();

  Object.keys(styles).forEach((key) => {
    if (key.startsWith("--")) {
      const hoverMatch = key.match(/^(--[a-z-]+-)(\w+)(-hover)$/);
      if (hoverMatch) {
        const prefix = hoverMatch[1];
        const bp = hoverMatch[2];
        const isHover = hoverMatch[3];

        if (enabledBreakpoints.includes(bp)) {
          const prefixKey = prefix + isHover;
          if (!prefixMap.has(prefixKey)) {
            prefixMap.set(prefixKey, { prefix, isHover });
          }
        }
      } else {
        const normalMatch = key.match(/^(--[a-z-]+-)(\w+)$/);
        if (normalMatch) {
          const prefix = normalMatch[1];
          const bp = normalMatch[2];

          if (enabledBreakpoints.includes(bp)) {
            const prefixKey = prefix;
            if (!prefixMap.has(prefixKey)) {
              prefixMap.set(prefixKey, { prefix, isHover: "" });
            }
          }
        }
      }
    }
  });

  prefixMap.forEach(({ prefix, isHover }) => {
    const resolvedValue = resolveValue(prefix, isHover);
    if (resolvedValue !== null) {
      previewStyles[`${prefix}pc${isHover}`] = resolvedValue;
    }
  });

  return previewStyles;
};

export const getPreviewValue = (styles, prefix, previewDevice, isHover = false) => {
  const enabledBreakpoints = getEnabledBreakpoints();
  const deviceIndex = enabledBreakpoints.indexOf(previewDevice);
  const hoverSuffix = isHover ? "-hover" : "";

  for (let i = deviceIndex; i >= 0; i--) {
    const key = `${prefix}${enabledBreakpoints[i]}${hoverSuffix}`;
    if (styles[key] !== undefined && styles[key] !== null && styles[key] !== "") {
      return styles[key];
    }
  }

  return null;
};

export const applyPreviewOverrides = (styles, previewDevice) => {
  if (!previewDevice || previewDevice === "pc") {
    return {};
  }

  const overrides = {};
  const enabledBreakpoints = getEnabledBreakpoints();
  const deviceIndex = enabledBreakpoints.indexOf(previewDevice);

  if (deviceIndex === -1) {
    return {};
  }

  const cssVarPatterns = [
    "--font-size-",
    "--font-weight-",
    "--line-height-",
    "--text-main-height-",
    "--letter-spacing-",
    "--micro-text-font-size-",
    "--micro-text-font-weight-",
    "--micro-text-letter-spacing-",
    "--micro-text-line-height-",
    "--micro-text-margin-top-",
    "--micro-text-margin-right-",
    "--micro-text-margin-bottom-",
    "--micro-text-margin-left-",
    "--micro-text-padding-top-",
    "--micro-text-padding-right-",
    "--micro-text-padding-bottom-",
    "--micro-text-padding-left-",
    "--micro-text-rotate-",
    "--sub-text-font-size-",
    "--sub-text-font-weight-",
    "--sub-text-letter-spacing-",
    "--sub-text-line-height-",
    "--sub-text-margin-top-",
    "--sub-text-margin-right-",
    "--sub-text-margin-bottom-",
    "--sub-text-margin-left-",
    "--sub-text-padding-top-",
    "--sub-text-padding-right-",
    "--sub-text-padding-bottom-",
    "--sub-text-padding-left-",
    "--sub-text-rotate-",
    "--spacing-padding-top-",
    "--spacing-padding-right-",
    "--spacing-padding-bottom-",
    "--spacing-padding-left-",
    "--spacing-margin-top-",
    "--spacing-margin-right-",
    "--spacing-margin-bottom-",
    "--spacing-margin-left-",
    "--layout-width-",
    "--layout-width-min-",
    "--layout-width-max-",
    "--layout-height-",
    "--layout-height-min-",
    "--layout-height-max-",
    "--layout-position-type-",
    "--layout-position-top-",
    "--layout-position-right-",
    "--layout-position-bottom-",
    "--layout-position-left-",
    "--layout-transform-translate-x-",
    "--layout-transform-translate-y-",
    "--styling-border-width-",
    "--styling-border-style-",
    "--styling-border-color-",
    "--styling-box-sizing-",
    "--styling-radius-",
    "--styling-radius-top-left-",
    "--styling-radius-top-right-",
    "--styling-radius-bottom-left-",
    "--styling-radius-bottom-right-",
    "--styling-shadow-",
    "--styling-inner-shadow-",
    "--styling-opacity-",
    "--styling-mix-blend-mode-",
    "--bg-color-",
    "--bg-gradient-",
    "--bg-image-url-",
    "--bg-image-position-",
    "--bg-image-size-",
    "--bg-image-repeat-",
    "--bg-pattern-color-",
    "--background-color-",
    "--background-color-opacity-",
    "--background-color-mix-blend-mode-",
    "--background-image-",
    "--background-position-",
    "--background-size-",
    "--background-repeat-",
    "--background-pattern-type-",
    "--background-pattern-color-",
    "--background-pattern-opacity-",
    "--background-pattern-size-",
    "--background-pattern-rotate-",
    "--icon-size-",
    "--icon-gap-",
    "--icon-offset-x-",
    "--icon-offset-y-",
    "--icon-color-",
    "--icon-frame-width-",
    "--icon-frame-height-",
    "--icon-frame-radius-",
    "--icon-frame-border-width-",
    "--icon-frame-border-top-width-",
    "--icon-frame-border-right-width-",
    "--icon-frame-border-bottom-width-",
    "--icon-frame-border-left-width-",
    "--icon-frame-border-color-",
    "--icon-frame-border-style-",
    "--thumbnail-image-url-",
    "--thumbnail-image-size-",
    "--thumbnail-image-position-",
    "--thumbnail-image-repeat-",
    "--thumbnail-color-",
    "--thumbnail-gradient-",
    "--thumbnail-image-",
    "--thumbnail-size-",
    "--thumbnail-position-",
    "--thumbnail-frame-width-",
    "--thumbnail-frame-height-",
    "--thumbnail-radius-",
    "--thumbnail-offset-x-",
    "--thumbnail-offset-y-",
    "--thumbnail-bg-width-",
    "--thumbnail-bg-height-",
    "--thumbnail-color-opacity-",
    "--thumbnail-color-blend-mode-",
  ];

  cssVarPatterns.forEach((pattern) => {
    enabledBreakpoints.forEach((bp, bpIndex) => {
      const regularKey = `${pattern}${bp}`;
      const hoverKey = `${pattern}${bp}-hover`;

      if (styles[regularKey] !== undefined) {
        let resolvedValue = null;
        for (let i = deviceIndex; i >= 0; i--) {
          const checkKey = `${pattern}${enabledBreakpoints[i]}`;
          if (styles[checkKey] !== undefined && styles[checkKey] !== null && styles[checkKey] !== "") {
            resolvedValue = styles[checkKey];
            break;
          }
        }
        if (resolvedValue !== null) {
          overrides[regularKey] = resolvedValue;
        }
      }

      if (styles[hoverKey] !== undefined) {
        let resolvedValue = null;
        for (let i = deviceIndex; i >= 0; i--) {
          const checkKey = `${pattern}${enabledBreakpoints[i]}-hover`;
          if (styles[checkKey] !== undefined && styles[checkKey] !== null && styles[checkKey] !== "") {
            resolvedValue = styles[checkKey];
            break;
          }
        }
        if (resolvedValue !== null) {
          overrides[hoverKey] = resolvedValue;
        }
      }
    });
  });

  return overrides;
};
