'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const tooltip = require('../../../../tooltip.cjs');
const tabs = require('../../../../tabs.cjs');
const classnameMultiselect = require('./classname-multiselect.cjs');
const classnameItemControl = require('./classname-item-control.cjs');
const accordion = require('../../../../accordion.cjs');
const badge = require('../../../../badge.cjs');

const BreakpointClassNameControl = ({
  onChange,
  value
}) => {
  const parseClassString = (str) => {
    const tokens = str.trim().split(/\s+/);
    const base2 = [];
    const md2 = [];
    const rest2 = [];
    for (const token of tokens) {
      if (token.startsWith("md:")) {
        md2.push(token.slice(3));
      } else if (token.includes(":")) {
        rest2.push(token);
      } else if (token) {
        base2.push(token);
      }
    }
    return {
      base: base2.join(" "),
      md: md2.join(" "),
      rest: rest2.join(" ")
    };
  };
  const [classString, setClassString] = React.useState(value || "");
  const [tab, setTab] = React.useState("base");
  React.useEffect(() => {
    if (typeof value === "string" && value !== classString) {
      setClassString(value);
    }
  }, [value]);
  const { base, md, rest } = parseClassString(classString);
  const handleBaseChange = React.useCallback(
    (newBase) => {
      const newClassString = [
        newBase,
        md && md.split(" ").map((cls) => `md:${cls}`).join(" "),
        rest
      ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
      setClassString(newClassString);
    },
    [md, rest]
  );
  const handleMdChange = React.useCallback(
    (newMd) => {
      const mdClasses = newMd.split(" ").filter(Boolean).map((cls) => `md:${cls}`).join(" ");
      const newClassString = [base, mdClasses, rest].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
      setClassString(newClassString);
    },
    [base, rest]
  );
  React.useEffect(() => {
    if (onChange) onChange(classString);
  }, [classString, onChange]);
  const handleMultiselectChange = React.useCallback((newClassString) => {
    setClassString(newClassString);
  }, []);
  const handleTabChange = React.useCallback(
    (val) => setTab(val),
    []
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: "w-full border rounded-lg",
      "data-testid": "breakpoint-classname-control",
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs(
          tabs.Tabs,
          {
            value: tab,
            onValueChange: handleTabChange,
            className: "w-full",
            "data-testid": "breakpoint-tabs",
            children: [
              /* @__PURE__ */ jsxRuntime.jsxs(
                tabs.TabsList,
                {
                  className: "w-full grid grid-cols-2",
                  "data-testid": "breakpoint-tabs-list",
                  children: [
                    /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "base", "data-testid": "base-tab-trigger", children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Base" }),
                        base && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { className: "ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]", children: base.split(" ").filter(Boolean).length })
                      ] }) }),
                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Base styles for all screen sizes" })
                    ] }) }),
                    /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "md", "data-testid": "md-tab-trigger", children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap text-nowrap", children: "Tablet & Desktop" }),
                        md && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { className: "ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]", children: md.split(" ").filter(Boolean).length })
                      ] }) }),
                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Overrides for screens larger than 768px (md:*)" })
                    ] }) })
                  ]
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx(
                tabs.TabsContent,
                {
                  className: "mt-0",
                  value: "base",
                  "data-testid": "base-tab-content",
                  children: /* @__PURE__ */ jsxRuntime.jsx(classnameItemControl.ClassNameItemControl, { value: base, onChange: handleBaseChange })
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { className: "mt-0", value: "md", "data-testid": "md-tab-content", children: /* @__PURE__ */ jsxRuntime.jsx(classnameItemControl.ClassNameItemControl, { value: md, onChange: handleMdChange }) })
            ]
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          accordion.Accordion,
          {
            type: "single",
            collapsible: true,
            defaultValue: "",
            "data-testid": "classes-accordion",
            children: /* @__PURE__ */ jsxRuntime.jsxs(
              accordion.AccordionItem,
              {
                value: "classes",
                className: "border-t border-b-0 px-4 [&_#accordion-content[data-state=open]]:overflow-visible [&_#accordion-content[data-state=closed]]:overflow-hidden",
                "data-testid": "classes-accordion-item",
                children: [
                  /* @__PURE__ */ jsxRuntime.jsx(
                    accordion.AccordionTrigger,
                    {
                      className: "text-sm",
                      "data-testid": "classes-accordion-trigger",
                      children: "Edit All Classes"
                    }
                  ),
                  /* @__PURE__ */ jsxRuntime.jsx(
                    accordion.AccordionContent,
                    {
                      "data-testid": "classes-accordion-content",
                      id: "accordion-content",
                      children: /* @__PURE__ */ jsxRuntime.jsx(
                        classnameMultiselect,
                        {
                          value: classString,
                          onChange: handleMultiselectChange
                        }
                      )
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
};

exports.BreakpointClassNameControl = BreakpointClassNameControl;
