import { jsxs as C, jsx as t } from "react/jsx-runtime";
import { useState as R, useCallback as N, useMemo as g } from "react";
import { c as G } from "./index.CfM2L_w0.js";
import { a as w } from "./index.CfQlFjZU.js";
import { l as v } from "./index.C1ZfizMq.js";
import { n as x } from "./index.B0wX8xO7.js";
import { a as P, g as h, d as k } from "./GridRow._ehOXG8R.js";
import "./GridLayouts.DSIvKCIo.js";
import { S as T } from "./shared.EdGf6tcG.js";
import { B as M } from "./ButtonGroup.GFy-lPs3.js";
import { u as W } from "./useIsMobile.56gy4Bq-.js";
import { S as H } from "./SelectTemplateHeader.AIdB2u3x.js";
import { T as I } from "./TemplateCard.DNip94cE.js";
import { s as o } from "./selectTemplatePage.module.CN8m5vGx.js";
function j({
  templates: r,
  onSelectionComplete: i,
  onPreviousClicked: l,
  title: m,
  subtitle: n,
  className: c
}) {
  const [a, d] = R([]), p = W(), u = N(() => {
    const e = r.filter(
      (s) => a.includes(s.id)
    );
    i(e);
  }, [r, a, i]), f = N((e) => {
    d((s) => s.includes(e.id) ? s.filter((b) => b !== e.id) : [...s, e.id]);
  }, []);
  return {
    templates: g(
      () => r.map((e) => ({
        ...e,
        isSelected: a.includes(e.id)
      })),
      [r, a]
    ),
    onTemplateSelect: f,
    title: m,
    subtitle: n,
    headerColClassName: o.templateHeaderCol,
    headerRowClassName: o.templateHeaderRow,
    itemRowClassName: o.templateItemGridRow,
    gridContainerClassName: o.selectTemplatePageGrid,
    templateWrapperClassName: G(o.templateWrapper, c),
    buttons: [
      {
        label: "Next",
        semantic: T.PRIMARY,
        onClick: u,
        disabled: a.length === 0
      },
      {
        label: "Previous",
        semantic: T.SECONDARY,
        onClick: l
      }
    ],
    buttonGroupOrientation: p ? "vertical" : "horizontal"
  };
}
function y({
  templates: r,
  onTemplateSelect: i,
  title: l,
  subtitle: m,
  headerColClassName: n,
  headerRowClassName: c,
  itemRowClassName: a,
  gridContainerClassName: d,
  templateWrapperClassName: p,
  buttons: u,
  buttonGroupOrientation: f
}) {
  return /* @__PURE__ */ C("div", { className: p, children: [
    /* @__PURE__ */ C(P, { className: d, children: [
      /* @__PURE__ */ t(
        x,
        {
          value: l,
          then: /* @__PURE__ */ t(h, { className: c, children: /* @__PURE__ */ t(k, { className: n, children: /* @__PURE__ */ t(H, { title: l || "", subtitle: m }) }) })
        }
      ),
      /* @__PURE__ */ t(h, { className: a, children: /* @__PURE__ */ t(
        v,
        {
          values: r,
          layout: (S) => /* @__PURE__ */ t(
            I,
            {
              template: S,
              onTemplateSelect: i
            }
          )
        }
      ) })
    ] }),
    /* @__PURE__ */ t(
      M,
      {
        floating: !0,
        orientation: f,
        buttons: u
      }
    )
  ] });
}
const U = w(y, j);
export {
  U as S
};
