import { EffectiveStyle } from "../utils/effectiveStyleManager";

/**
 * The `widgetStyle` object every template widget receives.
 * Structurally identical to `BaseProps["widgetStyle"]` (see `Factory/BaseType`)
 * and to `BlockProps["widgetStyle"]`; declared here so this helper does not
 * depend on either module.
 */
export type WidgetStyle = {
  id?: string;
  className?: string;
  inline?: React.CSSProperties;
  important?: boolean;
  effectiveStyles?: EffectiveStyle[];
};

/** Attribute bag produced by {@link getWidgetStyleAttrs}, spread onto a root node. */
export type WidgetStyleAttrs = {
  id: string;
  className: string;
  "data-prc-col-important": string | undefined;
  style: React.CSSProperties;
};

/**
 * Builds the root-element attributes for a template container widget.
 *
 * Replaces the block that was copy-pasted across the view components:
 *
 *   id={widgetStyle?.id || ""}
 *   className={`base ${widgetStyle?.className || ""}`}
 *   data-prc-col-important={important ? widgetStyle?.className || undefined : undefined}
 *   style={{ ...(widgetStyle?.inline || {}) }}
 *
 * Output is byte-identical to that block, so adopting it changes no DOM.
 *
 * `className` and `data-prc-col-important` MUST stay on the same element:
 * vs-theme's `meta` mixin emits both `.cls {…}` and
 * `[data-prc-col-important~="cls"] {… !important}` for the same declarations.
 * Note the attribute carries only the configured class, never `baseClassName`.
 */
export const getWidgetStyleAttrs = (
  widgetStyle?: WidgetStyle,
  baseClassName?: string,
): WidgetStyleAttrs => ({
  id: widgetStyle?.id || "",
  className: baseClassName
    ? `${baseClassName} ${widgetStyle?.className || ""}`
    : widgetStyle?.className || "",
  "data-prc-col-important": widgetStyle?.important
    ? widgetStyle?.className || undefined
    : undefined,
  style: { ...(widgetStyle?.inline ?? {}) },
});

export default getWidgetStyleAttrs;