import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect, useCallback } from 'react';
import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../tooltip.mjs';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../tabs.mjs';
import ClassNameMultiselect from './classname-multiselect.mjs';
import { ClassNameItemControl } from './classname-item-control.mjs';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../../../accordion.mjs';
import { Badge } from '../../../../badge.mjs';

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] = useState(value || "");
  const [tab, setTab] = useState("base");
  useEffect(() => {
    if (typeof value === "string" && value !== classString) {
      setClassString(value);
    }
  }, [value]);
  const { base, md, rest } = parseClassString(classString);
  const handleBaseChange = 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 = 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]
  );
  useEffect(() => {
    if (onChange) onChange(classString);
  }, [classString, onChange]);
  const handleMultiselectChange = useCallback((newClassString) => {
    setClassString(newClassString);
  }, []);
  const handleTabChange = useCallback(
    (val) => setTab(val),
    []
  );
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: "w-full border rounded-lg",
      "data-testid": "breakpoint-classname-control",
      children: [
        /* @__PURE__ */ jsxs(
          Tabs,
          {
            value: tab,
            onValueChange: handleTabChange,
            className: "w-full",
            "data-testid": "breakpoint-tabs",
            children: [
              /* @__PURE__ */ jsxs(
                TabsList,
                {
                  className: "w-full grid grid-cols-2",
                  "data-testid": "breakpoint-tabs-list",
                  children: [
                    /* @__PURE__ */ jsx(TabsTrigger, { value: "base", "data-testid": "base-tab-trigger", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
                      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                        /* @__PURE__ */ jsx("span", { children: "Base" }),
                        base && /* @__PURE__ */ jsx(Badge, { className: "ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]", children: base.split(" ").filter(Boolean).length })
                      ] }) }),
                      /* @__PURE__ */ jsx(TooltipContent, { children: "Base styles for all screen sizes" })
                    ] }) }),
                    /* @__PURE__ */ jsx(TabsTrigger, { value: "md", "data-testid": "md-tab-trigger", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
                      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                        /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap text-nowrap", children: "Tablet & Desktop" }),
                        md && /* @__PURE__ */ jsx(Badge, { className: "ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]", children: md.split(" ").filter(Boolean).length })
                      ] }) }),
                      /* @__PURE__ */ jsx(TooltipContent, { children: "Overrides for screens larger than 768px (md:*)" })
                    ] }) })
                  ]
                }
              ),
              /* @__PURE__ */ jsx(
                TabsContent,
                {
                  className: "mt-0",
                  value: "base",
                  "data-testid": "base-tab-content",
                  children: /* @__PURE__ */ jsx(ClassNameItemControl, { value: base, onChange: handleBaseChange })
                }
              ),
              /* @__PURE__ */ jsx(TabsContent, { className: "mt-0", value: "md", "data-testid": "md-tab-content", children: /* @__PURE__ */ jsx(ClassNameItemControl, { value: md, onChange: handleMdChange }) })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          Accordion,
          {
            type: "single",
            collapsible: true,
            defaultValue: "",
            "data-testid": "classes-accordion",
            children: /* @__PURE__ */ jsxs(
              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__ */ jsx(
                    AccordionTrigger,
                    {
                      className: "text-sm",
                      "data-testid": "classes-accordion-trigger",
                      children: "Edit All Classes"
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    AccordionContent,
                    {
                      "data-testid": "classes-accordion-content",
                      id: "accordion-content",
                      children: /* @__PURE__ */ jsx(
                        ClassNameMultiselect,
                        {
                          value: classString,
                          onChange: handleMultiselectChange
                        }
                      )
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
};

export { BreakpointClassNameControl };
