"use client";
import { jsx as t, jsxs as i } from "react/jsx-runtime";
import { IconControl as T } from "../../../components/controls/icon.control.js";
import { InputControl as x } from "../../../components/controls/input.control.js";
import { Accordion as n } from "../../../components/shared/accordion.js";
import { Button as y } from "../../../components/shared/button.js";
import { Label as B } from "../../../components/shared/label.js";
import { useSettings as f } from "../../../hooks/use-settings.js";
import { duplicateTabItem as L, removeTabItem as k } from "../../../store/builder-slice.js";
import { getCurrentLocale as w, getSelectedBlockId as F } from "../../../../../../store/selectors.js";
import { SettingsType as c } from "../../../types/index.js";
import { classNames as u, createId as S } from "../../../utils/index.js";
import { useAppDispatch as A } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as b } from "../../../hooks/use-app-selector.js";
import { arrayMoveImmutable as j } from "../../../../../../node_modules/.pnpm/array-move@4.0.0/node_modules/array-move/index.js";
import z, { SortableItem as K } 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 O } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { BsTrash as $, BsPlus as V } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FaRegCopy as D } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa6/index.js";
const oe = () => {
  const [o, a] = f("tabs", c.BLOCK), [m, d] = f(
    "activeTabId",
    c.BLOCK
  ), h = b(w), l = b(F), p = A(), g = (e, r) => {
    a(j(o ?? [], e, r));
  }, N = (e, r) => {
    const s = e == null ? void 0 : e.replace(/(<([^>]+)>)/gi, "").trim();
    return s || `Item #${r + 1}`;
  }, I = () => {
    if (!l)
      return;
    const e = {
      id: S(),
      label: {
        en: `Tab ${(o == null ? void 0 : o.length) + 1}`
      },
      children: []
    };
    a((r) => [...r ?? [], e]), d(e.id);
  }, v = (e) => {
    l && p(k({ blockId: l, tabIndex: e }));
  }, C = (e) => {
    l && p(L({ blockId: l, tabIndex: e }));
  };
  return /* @__PURE__ */ t(n, { defaultValue: "Content", type: "single", collapsible: !0, children: /* @__PURE__ */ i(n.Item, { value: "Content", children: [
    /* @__PURE__ */ t(n.Trigger, { className: "p-4", children: "Tabs" }),
    /* @__PURE__ */ i(n.Content, { className: "px-4", children: [
      /* @__PURE__ */ t(z, { onSortEnd: g, lockAxis: "y", children: o == null ? void 0 : o.map((e, r) => {
        var s;
        return /* @__PURE__ */ i("div", { className: "mb-1.5", children: [
          /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t("div", { className: "z-99 bg-[#F8F9F8] px-2", children: /* @__PURE__ */ i("div", { className: "flex min-h-[40px]  items-center", children: [
            /* @__PURE__ */ t("button", { className: "me-1 cursor-move", children: /* @__PURE__ */ t(O, { size: 14, color: "#828282" }) }),
            /* @__PURE__ */ t(
              B,
              {
                onClick: () => {
                  d(e.id);
                },
                className: "flex h-full flex-1 cursor-pointer items-center py-1 text-xs hover:bg-slate-50",
                children: N((s = e.label) == null ? void 0 : s[h], r)
              }
            ),
            /* @__PURE__ */ t(
              "button",
              {
                onClick: () => C(r),
                className: "me-1.5 flex h-full cursor-pointer items-center justify-center hover:bg-slate-50",
                children: /* @__PURE__ */ t(D, {})
              }
            ),
            /* @__PURE__ */ t(
              "button",
              {
                onClick: () => v(r),
                className: "flex h-full cursor-pointer items-center justify-center hover:bg-slate-50",
                disabled: (o == null ? void 0 : o.length) === 1,
                children: /* @__PURE__ */ t($, {})
              }
            )
          ] }) }, r) }, e.id),
          /* @__PURE__ */ t(
            "div",
            {
              className: u(
                "grid grid-rows-[0fr] overflow-hidden bg-[#F8F9F8] transition-[grid-template-rows] duration-200",
                {
                  "grid-rows-[1fr]": m === e.id
                }
              ),
              children: /* @__PURE__ */ i(
                "div",
                {
                  className: u(
                    "min-h-0 px-3 transition-[padding-top,padding-bottom] duration-200",
                    {
                      "h-auto pb-3": m === e.id
                    }
                  ),
                  children: [
                    /* @__PURE__ */ t(
                      x,
                      {
                        label: "Label",
                        type: c.BLOCK,
                        fieldName: `tabs.${r}.label`,
                        isLocalized: !0
                      }
                    ),
                    /* @__PURE__ */ t(
                      T,
                      {
                        label: "Icon",
                        type: c.BLOCK,
                        fieldName: `tabs.${r}.icon`,
                        className: "mt-3"
                      }
                    )
                  ]
                }
              )
            }
          )
        ] }, e.id);
      }) }),
      /* @__PURE__ */ t("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ i(y, { onClick: I, variant: "outline", className: "flex", children: [
        /* @__PURE__ */ t(V, { size: 20, className: "me-1" }),
        "Add New"
      ] }) })
    ] })
  ] }) });
};
export {
  oe as default
};
//# sourceMappingURL=tabs-content.control.js.map
