---
const { widget, options } = Astro.props;
import AposArea from "../components/AposArea.astro";
import LayoutColumn from "./LayoutColumn.astro";

const gapMeta = widget._options || {};
const resolvedGap = options._gap ?? gapMeta._gap ?? null;
const gapHasGlobal = options._gapHasGlobal ?? gapMeta._gapHasGlobal ?? false;

// Resolve the inline `--grid-gap` value
const hasWidgetGap = resolvedGap != null;
const omitGridGap = !hasWidgetGap && gapHasGlobal;
const gridGap = hasWidgetGap
  ? resolvedGap
  : omitGridGap
    ? undefined
    : options.gap || "0";

// Mirror the Nunjucks `parentOptionsForArea` helper so the in-place
// layout editor (AposAreaLayoutEditor) sees the same `gap` signal in
// its `data-parent-options` JSON as it would on the Nunjucks side:
// - widget value present → carries through (string with unit).
// - widget value absent + global enabled → `gap: null` (signal omit).
// - otherwise → no `gap` key (use the static module default / BC).
const parentOptions = {
  ...options,
  widgetId: widget._id,
  ...(hasWidgetGap ? { gap: resolvedGap } : omitGridGap ? { gap: null } : {}),
};
---

<AposArea
  area={widget.columns}
  aposClassName="layout-widget"
  aposStyle={{
    "--grid-columns": options.columns,
    ...(gridGap !== undefined ? { "--grid-gap": gridGap } : {}),
    "--grid-rows": "auto",
    "--mobile-grid-rows": "auto",
    "--tablet-grid-rows": "auto",
    "--justify-items": options.defaultCellHorizontalAlignment || "stretch",
    "--align-items": options.defaultCellVerticalAlignment || "stretch",
  }}
  aposAttributes={{
    "data-tablet-auto": true,
    "data-mobile-auto": true,
  }}
  aposParentOptions={parentOptions}
  widgetComponent={LayoutColumn}
/>