import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { BackgroundControl as B } from "../../../../components/controls/background.control.js";
import { ColorControl as N } from "../../../../components/controls/color.control.js";
import { InputControl as u } from "../../../../components/controls/input.control.js";
import { LinkControl as b } from "../../../../components/controls/link.control.js";
import { TextareaControl as k } from "../../../../components/controls/textarea.control.js";
import { Button as L } from "../../../../components/shared/button.js";
import { Label as S } from "../../../../components/shared/label.js";
import { Tabs as i } from "../../../../components/shared/tabs.js";
import { useSettings as x } from "../../../../hooks/use-settings.js";
import { getCurrentLocale as O } from "../../../../../../../store/selectors.js";
import { SettingsType as r } from "../../../../types/index.js";
import { PseudoClass as F } from "../../../../types/style.js";
import { createId as C, classNames as g } from "../../../../../../../utils.js";
import { useAppSelector as $ } from "../../../../hooks/use-app-selector.js";
import { arrayMoveImmutable as K } from "../../../../../../../node_modules/.pnpm/array-move@4.0.0/node_modules/array-move/index.js";
import { l as m } from "../../../../../../../_virtual/lodash.js";
import { useState as w } from "react";
import T, { SortableItem as z } from "../../../../../../../node_modules/.pnpm/react-easy-sort@1.6.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/react-easy-sort/index.module.js";
import { BiGridVertical as A } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { BsTrash as I, BsPlus as P } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FaRegCopy as j } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import D from "./slide-horizontal-position.control.js";
import E from "./slide-overlay-blend.control.js";
import V from "./slide-overlay-color.control.js";
import H from "./slide-overlay.control.js";
import M from "./slide-text-align.control.js";
import G from "./slide-vertical-position.control.js";
const ye = () => {
  const h = $(O), [s, d] = x(
    "slides",
    r.BLOCK
  ), [c, p] = w(""), y = (t, o) => {
    d(K(s ?? [], t, o));
  }, v = (t, o) => {
    const a = t == null ? void 0 : t.replace(/(<([^>]+)>)/gi, "").trim();
    return a || `Item #${o + 1}`;
  };
  return /* @__PURE__ */ l("div", { children: [
    /* @__PURE__ */ e(T, { onSortEnd: y, lockAxis: "y", children: s == null ? void 0 : s.map((t, o) => {
      var a, f;
      return /* @__PURE__ */ l("div", { className: "mb-1.5", children: [
        /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e("div", { className: "z-[99] bg-[#F8F9F8] px-2", children: /* @__PURE__ */ l("div", { className: "flex min-h-[40px] items-center", children: [
          /* @__PURE__ */ e("button", { className: "me-1 cursor-move", children: /* @__PURE__ */ e(A, { size: 14, color: "#828282" }) }),
          /* @__PURE__ */ e(
            S,
            {
              onClick: () => {
                p((n) => n === t.id ? "" : t.id);
              },
              className: "flex h-full flex-1 cursor-pointer items-center py-1 text-xs hover:bg-gray-50",
              children: v(((a = t.title) == null ? void 0 : a[h]) || ((f = t.title) == null ? void 0 : f.en), o)
            }
          ),
          /* @__PURE__ */ e(
            "div",
            {
              onClick: () => {
                const n = m.cloneDeep(s) ?? [];
                n.splice(o + 1, 0, {
                  ...t,
                  id: C()
                }), d(n);
              },
              className: "me-1.5 flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
              children: /* @__PURE__ */ e(j, {})
            }
          ),
          /* @__PURE__ */ e(
            "div",
            {
              onClick: () => {
                const n = m.cloneDeep(s) ?? [];
                n.splice(o, 1), d(n);
              },
              className: "flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
              children: /* @__PURE__ */ e(I, {})
            }
          )
        ] }) }) }, t.id),
        /* @__PURE__ */ e(
          "div",
          {
            className: g(
              "grid grid-rows-[0fr] overflow-hidden bg-[#F8F9F8] transition-[grid-template-rows] duration-200",
              {
                "grid-rows-[1fr]": c === t.id
              }
            ),
            children: /* @__PURE__ */ e(
              "div",
              {
                className: g(
                  "min-h-0 px-3 transition-[padding-top,padding-bottom] duration-200",
                  {
                    "h-auto pb-3": c === t.id
                  }
                ),
                children: /* @__PURE__ */ l(i, { defaultValue: "Background", children: [
                  /* @__PURE__ */ l(i.List, { className: "h-8 w-full rounded-full", children: [
                    /* @__PURE__ */ e(
                      i.Trigger,
                      {
                        className: "flex-1 rounded-full p-[3px] text-[11px]",
                        value: "Background",
                        children: "Background"
                        /* BACKGROUND */
                      }
                    ),
                    /* @__PURE__ */ e(
                      i.Trigger,
                      {
                        className: "flex-1 rounded-full p-[3px] text-[11px]",
                        value: "Content",
                        children: "Content"
                        /* CONTENT */
                      }
                    ),
                    /* @__PURE__ */ e(
                      i.Trigger,
                      {
                        className: "flex-1 rounded-full p-[3px] text-[11px]",
                        value: "Style",
                        children: "Style"
                        /* STYLE */
                      }
                    )
                  ] }),
                  /* @__PURE__ */ l(i.Content, { value: "Background", children: [
                    /* @__PURE__ */ e(
                      B,
                      {
                        fieldName: `slides.${o}.background`,
                        type: r.BLOCK,
                        mode: F.DEFAULT
                      }
                    ),
                    /* @__PURE__ */ e(
                      H,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.showBgOverlay.desktop`,
                        mediaField: `slides.${o}.backgroundImage`
                      }
                    ),
                    /* @__PURE__ */ e(
                      V,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.overlayColor`,
                        overlayField: `slides.${o}.showBgOverlay.desktop`
                      }
                    ),
                    /* @__PURE__ */ e(
                      E,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.blendMode.desktop`,
                        overlayField: `slides.${o}.showBgOverlay.desktop`
                      }
                    )
                  ] }),
                  /* @__PURE__ */ l(i.Content, { value: "Content", children: [
                    /* @__PURE__ */ e(
                      u,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.title`,
                        label: "Title",
                        direction: "col",
                        isLocalized: !0
                      }
                    ),
                    /* @__PURE__ */ e(
                      k,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.description`,
                        label: "Description",
                        isLocalized: !0
                      }
                    ),
                    /* @__PURE__ */ e(
                      u,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.button.text`,
                        label: "Button Text",
                        direction: "col",
                        isLocalized: !0
                      }
                    ),
                    /* @__PURE__ */ e(
                      b,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.button.link`
                      }
                    )
                  ] }),
                  /* @__PURE__ */ l(i.Content, { value: "Style", children: [
                    /* @__PURE__ */ e(
                      D,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.horizontalPosition.desktop`
                      }
                    ),
                    /* @__PURE__ */ e(
                      G,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.verticalPosition.desktop`
                      }
                    ),
                    /* @__PURE__ */ e(
                      M,
                      {
                        type: r.BLOCK,
                        fieldName: `slides.${o}.textAlign.desktop`
                      }
                    ),
                    /* @__PURE__ */ e(
                      N,
                      {
                        label: "Content Color",
                        type: r.BLOCK,
                        fieldName: `slides.${o}.contentColor.default`
                      }
                    )
                  ] })
                ] })
              }
            )
          }
        )
      ] }, t.id);
    }) }),
    /* @__PURE__ */ e("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ l(
      L,
      {
        onClick: () => {
          const t = m.cloneDeep(s) ?? [], o = C();
          t.push({
            id: o,
            title: {
              en: `Item #${t.length + 1}`
            },
            description: {
              en: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            },
            background: { color: { default: "#BBBBBB" } },
            contentColor: { default: "#FFFFFF" },
            button: {
              text: {
                en: "Click Here"
              }
            },
            textAlign: { desktop: "center" }
          }), d(t), p(o);
        },
        variant: "outline",
        className: "flex",
        children: [
          /* @__PURE__ */ e(P, { size: 20, className: "me-1" }),
          "Add New"
        ]
      }
    ) })
  ] });
};
export {
  ye as default
};
//# sourceMappingURL=slides.control.js.map
