import {
  AttributeUIComponent,
  CreateAttributeSchema,
  UpdateAttributeSchema
} from "./chunk-4ZTZTIIM.js";
import {
  RouteFocusModal,
  useRouteModal
} from "./chunk-FWJLS7XD.js";
import {
  Form
} from "./chunk-3QSRE5LS.js";
import "./chunk-PBQ5M44A.js";
import "./chunk-OH4AABUT.js";
import "./chunk-YKDEE7ZL.js";
import "./chunk-AEMDNTW5.js";
import "./chunk-LYD3C73Z.js";
import {
  useCreateAttribute
} from "./chunk-7O5NDICV.js";
import "./chunk-46M463BR.js";
import "./chunk-YFRC6GEN.js";
import "./chunk-N6SI4IIT.js";
import "./chunk-JPNPTILP.js";
import "./chunk-DAXXLQKB.js";
import "./chunk-OHOWEMHO.js";
import "./chunk-GKGLVDDV.js";
import "./chunk-WJJXUXSO.js";
import "./chunk-LAPEZATU.js";
import "./chunk-DBNPVU3L.js";
import "./chunk-U7WZYWGA.js";
import "./chunk-ZN7LWXVC.js";
import "./chunk-VYMODH6P.js";
import "./chunk-LEG67A2R.js";
import "./chunk-PRBE5CM3.js";
import "./chunk-5TRY5IMZ.js";
import "./chunk-TAKEQAZZ.js";
import "./chunk-B6FG7A6W.js";
import "./chunk-EPHVGD5Z.js";
import "./chunk-ESPLVOFC.js";
import "./chunk-FXWKGNRV.js";
import "./chunk-VDKOJ5WD.js";
import "./chunk-DL2ZIXBO.js";
import {
  useProductCategories
} from "./chunk-Z2QQZOG3.js";
import "./chunk-5CK6XEFV.js";
import "./chunk-RHKRREUU.js";
import "./chunk-ZA2KFUFR.js";
import "./chunk-ZBWL72TB.js";
import "./chunk-NBMM2TZK.js";

// src/pages/attributes/attribute-create/attribute-create.tsx
import { useRef as useRef2, useState as useState3 } from "react";
import { Button as Button2, Heading, ProgressTabs, Text as Text3, toast } from "@medusajs/ui";
import { useTranslation as useTranslation4 } from "react-i18next";

// src/pages/attributes/attribute-edit/components/attribute-form.tsx
import { forwardRef, useEffect as useEffect2, useMemo, useImperativeHandle, useState as useState2 } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  InlineTip,
  Input as Input2,
  Select,
  Switch,
  Text as Text2,
  Textarea
} from "@medusajs/ui";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation as useTranslation3 } from "react-i18next";

// src/pages/attributes/attribute-create/components/multi-select-category.tsx
import { useEffect, useRef, useState } from "react";
import {
  ArrowUturnLeft,
  TriangleRightMini,
  TrianglesMini,
  XMarkMini
} from "@medusajs/icons";
import { Badge, Text } from "@medusajs/ui";
import { useTranslation } from "react-i18next";
import { jsx, jsxs } from "react/jsx-runtime";
var MultiSelectCategory = ({
  categories,
  value,
  onChange
}) => {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const triggerRef = useRef(null);
  const [currentParentId, setCurrentParentId] = useState(null);
  const [pathHistory, setPathHistory] = useState([]);
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  const handleToggle = () => {
    setIsOpen((prev) => !prev);
  };
  const hasChildren = (categoryId) => {
    return categories.some((cat) => cat.parent_category_id === categoryId);
  };
  const handleDrillDown = (category, event) => {
    event.stopPropagation();
    setPathHistory([...pathHistory, currentParentId]);
    setCurrentParentId(category.id);
  };
  const handleGoBack = () => {
    const newPathHistory = [...pathHistory];
    const previousParentId = newPathHistory.pop();
    setPathHistory(newPathHistory);
    setCurrentParentId(previousParentId || null);
  };
  const handleItemClick = (categoryId) => {
    const isSelected = value.includes(categoryId);
    if (isSelected) {
      onChange(value.filter((id) => id !== categoryId));
    } else {
      onChange([...value, categoryId]);
    }
  };
  const currentCategories = categories.filter(
    (cat) => cat.parent_category_id === currentParentId
  );
  const getBackButtonText = () => {
    const parentCategory = categories.find((cat) => cat.id === currentParentId);
    return parentCategory?.name || "";
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: "relative",
      "data-testid": "attribute-form-category-multiselect",
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            ref: triggerRef,
            className: "focus-within:ring-ui-ring-interactive relative flex h-10 w-full cursor-pointer items-center justify-between overflow-hidden rounded-md border border-ui-border-base bg-ui-bg-field text-ui-fg-base shadow-sm transition-colors duration-150 ease-in-out focus-within:border-ui-border-interactive focus-within:ring-1 hover:bg-ui-bg-field-hover",
            onClick: handleToggle,
            "data-testid": "attribute-form-category-multiselect-trigger",
            children: [
              /* @__PURE__ */ jsx(
                "div",
                {
                  className: "flex items-center gap-2 px-3 py-2",
                  "data-testid": "attribute-form-category-multiselect-trigger-content",
                  children: value.length > 0 ? /* @__PURE__ */ jsx(
                    "button",
                    {
                      type: "button",
                      onClick: (e) => {
                        e.stopPropagation();
                        onChange([]);
                      },
                      "data-testid": "attribute-form-category-multiselect-clear-button",
                      children: /* @__PURE__ */ jsxs(
                        Badge,
                        {
                          size: "small",
                          className: "w-fit",
                          "data-testid": "attribute-form-category-multiselect-badge",
                          children: [
                            value.length,
                            /* @__PURE__ */ jsx(XMarkMini, {})
                          ]
                        }
                      )
                    }
                  ) : /* @__PURE__ */ jsx(
                    Text,
                    {
                      className: "text-ui-fg-subtle",
                      "data-testid": "attribute-form-category-multiselect-placeholder",
                      children: t("attributes.fields.categories", "Select categories")
                    }
                  )
                }
              ),
              /* @__PURE__ */ jsx(
                "span",
                {
                  className: "flex h-full w-10 items-center justify-center border-l border-ui-border-base",
                  "data-testid": "attribute-form-category-multiselect-icon",
                  children: /* @__PURE__ */ jsx(TrianglesMini, {})
                }
              )
            ]
          }
        ),
        isOpen && /* @__PURE__ */ jsxs(
          "div",
          {
            ref: dropdownRef,
            className: "absolute z-10 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-ui-border-base bg-ui-bg-base shadow-lg",
            "data-testid": "attribute-form-category-multiselect-dropdown",
            children: [
              currentParentId !== null && // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
              /* @__PURE__ */ jsxs(
                "div",
                {
                  className: "flex cursor-pointer items-center gap-3 border-b border-ui-border-base px-3 py-2 text-ui-fg-subtle hover:bg-ui-bg-base-hover",
                  onClick: handleGoBack,
                  "data-testid": "attribute-form-category-multiselect-back-button",
                  children: [
                    /* @__PURE__ */ jsx(ArrowUturnLeft, {}),
                    /* @__PURE__ */ jsx(Text, { "data-testid": "attribute-form-category-multiselect-back-text", children: getBackButtonText() })
                  ]
                }
              ),
              currentCategories.length === 0 ? /* @__PURE__ */ jsx(
                "div",
                {
                  className: "p-3 text-ui-fg-subtle",
                  "data-testid": "attribute-form-category-multiselect-empty",
                  children: t("general.noResultsTitle", "No categories found.")
                }
              ) : currentCategories.map((category) => {
                const isSelected = value.includes(category.id);
                const hasChildrenNode = hasChildren(category.id);
                return (
                  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                  /* @__PURE__ */ jsxs(
                    "div",
                    {
                      className: "flex cursor-pointer items-center justify-between px-1 py-1",
                      onClick: () => handleItemClick(category.id),
                      "data-testid": `attribute-form-category-multiselect-item-${category.id}`,
                      children: [
                        /* @__PURE__ */ jsxs(
                          "div",
                          {
                            className: "relative mr-2 flex flex-1 items-center rounded-md px-2 py-1.5 hover:bg-ui-bg-base-hover",
                            "data-testid": `attribute-form-category-multiselect-item-${category.id}-content`,
                            children: [
                              isSelected && /* @__PURE__ */ jsx(
                                "span",
                                {
                                  className: "absolute left-3 top-1/2 h-1 w-1 -translate-y-1/2 rounded-full bg-ui-fg-base",
                                  "data-testid": `attribute-form-category-multiselect-item-${category.id}-selected-indicator`
                                }
                              ),
                              /* @__PURE__ */ jsx(
                                Text,
                                {
                                  className: "ml-6",
                                  "data-testid": `attribute-form-category-multiselect-item-${category.id}-name`,
                                  children: category.name
                                }
                              )
                            ]
                          }
                        ),
                        hasChildrenNode && // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                        /* @__PURE__ */ jsx(
                          "div",
                          {
                            onClick: (e) => handleDrillDown(category, e),
                            className: "rounded-md p-2 hover:bg-ui-bg-base-hover",
                            "data-testid": `attribute-form-category-multiselect-item-${category.id}-drill-down`,
                            children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "mr-1" })
                          }
                        )
                      ]
                    },
                    category.id
                  )
                );
              })
            ]
          }
        )
      ]
    }
  );
};

// src/pages/attributes/attribute-create/components/possible-values-list.tsx
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { DotsSix, XMark } from "@medusajs/icons";
import { Button, Hint, IconButton, Input, Label } from "@medusajs/ui";
import { useFieldArray, useFormContext } from "react-hook-form";
import { useTranslation as useTranslation2 } from "react-i18next";
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var SortableItem = ({ id, index, onRemove }) => {
  const {
    register,
    formState: { errors }
  } = useFormContext();
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  };
  const possibleValuesErrors = errors?.possible_values;
  const fieldError = Array.isArray(possibleValuesErrors) ? possibleValuesErrors[index]?.value : void 0;
  return /* @__PURE__ */ jsxs2(Fragment, { children: [
    /* @__PURE__ */ jsxs2(
      "div",
      {
        ref: setNodeRef,
        style,
        className: "flex items-center gap-2 p-2 bg-ui-bg-component border border-ui-border-base rounded-xl mb-2",
        "data-testid": `attribute-form-possible-value-item-${index}`,
        children: [
          /* @__PURE__ */ jsx2(
            "button",
            {
              type: "button",
              className: "cursor-grab active:cursor-grabbing",
              ...attributes,
              ...listeners,
              "data-testid": `attribute-form-possible-value-drag-handle-${index}`,
              children: /* @__PURE__ */ jsx2(DotsSix, { className: "text-ui-fg-subtle" })
            }
          ),
          /* @__PURE__ */ jsx2("div", { className: "flex-1", children: /* @__PURE__ */ jsx2(
            Input,
            {
              className: "flex-1",
              "aria-invalid": !!fieldError,
              placeholder: "Enter value",
              ...register(`possible_values.${index}.value`),
              "data-testid": `attribute-form-possible-value-input-${index}`
            }
          ) }),
          /* @__PURE__ */ jsx2(
            IconButton,
            {
              variant: "transparent",
              size: "small",
              type: "button",
              onClick: onRemove,
              "data-testid": `attribute-form-possible-value-remove-button-${index}`,
              children: /* @__PURE__ */ jsx2(XMark, {})
            }
          )
        ]
      }
    ),
    fieldError && /* @__PURE__ */ jsx2(
      Hint,
      {
        variant: "error",
        className: "mb-2",
        "data-testid": `attribute-form-possible-value-error-${index}`,
        children: fieldError.message
      }
    )
  ] });
};
var PossibleValuesList = () => {
  const { t } = useTranslation2();
  const { control, getValues, formState } = useFormContext();
  const { fields, append, remove, update } = useFieldArray({
    control,
    name: "possible_values"
  });
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates
    })
  );
  const handleDragEnd = (event) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      const oldIndex = fields.findIndex((field) => field.id === active.id);
      const newIndex = fields.findIndex((field) => field.id === over.id);
      const currentValues = getValues("possible_values");
      const reorderedValues = arrayMove(currentValues, oldIndex, newIndex);
      reorderedValues.forEach((value, index) => {
        update(index, {
          value: value.value,
          rank: index,
          metadata: value.metadata || {}
        });
      });
    }
  };
  const handleAddValue = (e) => {
    e.preventDefault();
    append({
      value: "",
      rank: fields.length,
      metadata: {}
    });
  };
  const possibleValuesError = formState.errors.possible_values;
  const shouldShowListError = possibleValuesError && !Array.isArray(possibleValuesError);
  return /* @__PURE__ */ jsxs2("div", { className: "space-y-2", "data-testid": "attribute-form-possible-values-list", children: [
    /* @__PURE__ */ jsxs2(
      "div",
      {
        className: "flex items-center justify-between pb-1",
        "data-testid": "attribute-form-possible-values-header",
        children: [
          /* @__PURE__ */ jsx2(Label, { "data-testid": "attribute-form-possible-values-label", children: t("attributes.fields.possibleValues", "Possible Values") }),
          /* @__PURE__ */ jsx2(
            Button,
            {
              type: "button",
              variant: "secondary",
              size: "small",
              onClick: handleAddValue,
              "data-testid": "attribute-form-possible-values-add-button",
              children: t("actions.add", "Add")
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsx2(
      DndContext,
      {
        sensors,
        collisionDetection: closestCenter,
        onDragEnd: handleDragEnd,
        children: /* @__PURE__ */ jsx2(
          SortableContext,
          {
            items: fields.map((field) => field.id),
            strategy: verticalListSortingStrategy,
            children: fields.map((field, index) => /* @__PURE__ */ jsx2(
              SortableItem,
              {
                id: field.id,
                index,
                onRemove: () => remove(index)
              },
              field.id
            ))
          }
        )
      }
    ),
    shouldShowListError && /* @__PURE__ */ jsx2(
      Hint,
      {
        variant: "error",
        "data-testid": "attribute-form-possible-values-list-error",
        children: possibleValuesError.message
      }
    )
  ] });
};

// src/pages/attributes/attribute-edit/components/attribute-form.tsx
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
var UI_COMPONENT_LABELS = {
  select: "Single Select",
  multivalue: "Multi Select",
  unit: "Unit",
  toggle: "Toggle",
  text_area: "Text"
};
var AttributeForm = forwardRef(
  ({
    initialData,
    onSubmit,
    categories,
    mode = "create",
    activeTab = "details",
    onFormStateChange
  }, ref) => {
    const { t } = useTranslation3();
    const [showCategorySection, setShowCategorySection] = useState2(
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (initialData?.product_categories?.length || 0) > 0
    );
    const form = useForm({
      resolver: zodResolver(
        mode === "create" ? CreateAttributeSchema : UpdateAttributeSchema
      ),
      defaultValues: {
        name: initialData?.name ?? "",
        description: initialData?.description ?? "",
        handle: initialData?.handle ?? "",
        ui_component: initialData?.ui_component ?? AttributeUIComponent.SELECT,
        is_filterable: initialData?.is_filterable ?? false,
        is_required: initialData?.is_required ?? false,
        possible_values: initialData?.possible_values?.map((v) => ({
          id: v.id,
          value: v.value,
          rank: v.rank
        })) ?? [],
        product_category_ids: [],
        metadata: {}
      }
    });
    const handleSubmit = form.handleSubmit(async (data) => {
      try {
        await onSubmit(data);
      } catch (error) {
        console.error(error);
      }
    });
    useImperativeHandle(ref, () => ({
      validateFields: async (fields) => {
        const result = await form.trigger(
          fields
        );
        return result;
      }
    }));
    const [name, description, handle, uiComponent, possibleValues] = useWatch({
      control: form.control,
      name: [
        "name",
        "description",
        "handle",
        "ui_component",
        "possible_values"
      ]
    });
    const formStateKey = useMemo(() => {
      return JSON.stringify({
        name,
        description,
        handle,
        uiComponent,
        valuesCount: possibleValues?.length ?? 0
      });
    }, [name, description, handle, uiComponent, possibleValues]);
    useEffect2(() => {
      if (!onFormStateChange) return;
      const hasName = name?.trim();
      const hasDetailsData = description?.trim() || handle?.trim();
      const detailsStatus = hasName ? "completed" : hasDetailsData ? "in-progress" : "not-started";
      const hasTypeData = uiComponent && (possibleValues?.length ?? 0) > 0;
      const typeStatus = hasTypeData ? "completed" : "not-started";
      onFormStateChange({
        detailsStatus,
        typeStatus
      });
    }, [
      formStateKey,
      onFormStateChange,
      uiComponent,
      handle,
      description,
      name,
      possibleValues.length
    ]);
    const renderDetailsTab = () => /* @__PURE__ */ jsxs3("div", { className: "grid gap-6", "data-testid": "attribute-form-details-tab", children: [
      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
        /* @__PURE__ */ jsx3(
          Form.Field,
          {
            control: form.control,
            name: "name",
            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-name-field", children: [
              /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-name-label", children: t("attributes.fields.name", "Name") }),
              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-name-control", children: /* @__PURE__ */ jsx3(
                Input2,
                {
                  ...field,
                  size: "small",
                  "data-testid": "attribute-form-name-input"
                }
              ) }),
              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-name-error" })
            ] })
          }
        ),
        /* @__PURE__ */ jsx3(
          Form.Field,
          {
            control: form.control,
            name: "handle",
            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-handle-field", children: [
              /* @__PURE__ */ jsx3(Form.Label, { optional: true, "data-testid": "attribute-form-handle-label", children: t("attributes.fields.handle", "Handle") }),
              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-handle-control", children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
                /* @__PURE__ */ jsx3(
                  Input2,
                  {
                    ...field,
                    size: "small",
                    className: "pl-9",
                    "data-testid": "attribute-form-handle-input"
                  }
                ),
                /* @__PURE__ */ jsx3("div", { className: "z-100 absolute bottom-0 left-0 top-0 flex w-7 items-center justify-center border-r border-ui-border-base px-2 text-ui-fg-muted", children: "/" })
              ] }) }),
              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-handle-error" })
            ] })
          }
        )
      ] }),
      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-4", children: [
        /* @__PURE__ */ jsx3(
          Form.Field,
          {
            control: form.control,
            name: "description",
            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-description-field", children: [
              /* @__PURE__ */ jsx3(
                Form.Label,
                {
                  optional: true,
                  "data-testid": "attribute-form-description-label",
                  children: t("attributes.fields.description", "Description")
                }
              ),
              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-description-control", children: /* @__PURE__ */ jsx3(
                Textarea,
                {
                  ...field,
                  "data-testid": "attribute-form-description-input"
                }
              ) }),
              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-description-error" })
            ] })
          }
        ),
        /* @__PURE__ */ jsx3(
          Form.Field,
          {
            control: form.control,
            name: "is_filterable",
            render: ({ field }) => /* @__PURE__ */ jsx3(Form.Item, { "data-testid": "attribute-form-filterable-field", children: /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-filterable-control", children: /* @__PURE__ */ jsx3(
                Switch,
                {
                  checked: field.value,
                  onCheckedChange: field.onChange,
                  className: "mt-1",
                  "data-testid": "attribute-form-filterable-switch"
                }
              ) }),
              /* @__PURE__ */ jsxs3("div", { children: [
                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-filterable-label", children: t(
                  "attributes.fields.isFilterable",
                  "Yes, this is a filterable attribute"
                ) }),
                /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
                  "attributes.fields.isFilterableHint",
                  "If checked, buyers will be able to filter products using this attribute."
                ) })
              ] })
            ] }) }) })
          }
        ),
        /* @__PURE__ */ jsx3(
          Form.Field,
          {
            control: form.control,
            name: "is_required",
            render: ({ field }) => /* @__PURE__ */ jsx3(Form.Item, { "data-testid": "attribute-form-required-field", children: /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-required-control", children: /* @__PURE__ */ jsx3(
                Switch,
                {
                  checked: field.value,
                  onCheckedChange: field.onChange,
                  className: "mt-1",
                  "data-testid": "attribute-form-required-switch"
                }
              ) }),
              /* @__PURE__ */ jsxs3("div", { children: [
                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-required-label", children: t(
                  "attributes.fields.isRequired",
                  "Yes, this is a required attribute"
                ) }),
                /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
                  "attributes.fields.isRequiredHint",
                  "If checked, vendors must set a value to this attribute."
                ) })
              ] })
            ] }) }) })
          }
        ),
        /* @__PURE__ */ jsx3(
          Form.Field,
          {
            control: form.control,
            name: "product_category_ids",
            render: ({ field }) => {
              const categoryIds = field.value ?? [];
              const isGlobal = categoryIds.length === 0 && !showCategorySection;
              return /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-global-field", children: [
                /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
                  /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-global-control", children: /* @__PURE__ */ jsx3(
                    Switch,
                    {
                      checked: isGlobal,
                      onCheckedChange: (checked) => {
                        if (checked) {
                          field.onChange([]);
                          setShowCategorySection(false);
                        } else {
                          setShowCategorySection(true);
                        }
                      },
                      className: "mt-1",
                      "data-testid": "attribute-form-global-switch"
                    }
                  ) }),
                  /* @__PURE__ */ jsxs3("div", { children: [
                    /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-global-label", children: t(
                      "attributes.fields.global",
                      "Yes, this is a global attribute"
                    ) }),
                    /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
                      "attributes.hints.global",
                      "When enabled, this attribute applies to all products regardless of category."
                    ) })
                  ] })
                ] }) }),
                (showCategorySection || categoryIds.length > 0) && /* @__PURE__ */ jsxs3("div", { className: "mt-4", "data-testid": "attribute-form-category-field", children: [
                  /* @__PURE__ */ jsx3(
                    Form.Label,
                    {
                      optional: true,
                      "data-testid": "attribute-form-category-label",
                      children: t("attributes.fields.categories", "Product Categories")
                    }
                  ),
                  /* @__PURE__ */ jsx3("div", { className: "mt-1", children: /* @__PURE__ */ jsx3(
                    MultiSelectCategory,
                    {
                      categories: categories ?? [],
                      value: categoryIds,
                      onChange: (value) => field.onChange(value)
                    }
                  ) }),
                  /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-category-error" }),
                  /* @__PURE__ */ jsx3("div", { className: "mt-3", children: /* @__PURE__ */ jsx3(InlineTip, { label: "Warning", variant: "warning", children: t(
                    "attributes.hints.categoryInheritance",
                    "Child categories will inherit this attribute."
                  ) }) })
                ] })
              ] });
            }
          }
        )
      ] })
    ] });
    const renderTypeTab = () => /* @__PURE__ */ jsxs3(
      "div",
      {
        className: "grid w-full gap-6",
        "data-testid": "attribute-form-type-tab",
        children: [
          /* @__PURE__ */ jsx3(
            Form.Field,
            {
              control: form.control,
              name: "ui_component",
              render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-ui-component-field", children: [
                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-ui-component-label", children: t("attributes.fields.type", "Type") }),
                /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-ui-component-control", children: /* @__PURE__ */ jsxs3(
                  Select,
                  {
                    value: field.value,
                    onValueChange: field.onChange,
                    "data-testid": "attribute-form-ui-component-select",
                    children: [
                      /* @__PURE__ */ jsx3(
                        Select.Trigger,
                        {
                          className: "mt-1",
                          "data-testid": "attribute-form-ui-component-trigger",
                          children: /* @__PURE__ */ jsx3(
                            Select.Value,
                            {
                              placeholder: t(
                                "attributes.fields.typePlaceholder",
                                "Select Type"
                              )
                            }
                          )
                        }
                      ),
                      /* @__PURE__ */ jsx3(Select.Content, { "data-testid": "attribute-form-ui-component-content", children: Object.values(AttributeUIComponent).map((component) => /* @__PURE__ */ jsx3(
                        Select.Item,
                        {
                          value: component,
                          "data-testid": `attribute-form-ui-component-option-${component}`,
                          children: UI_COMPONENT_LABELS[component] ?? component
                        },
                        component
                      )) })
                    ]
                  }
                ) }),
                /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-ui-component-error" })
              ] })
            }
          ),
          (uiComponent === AttributeUIComponent.SELECT || uiComponent === AttributeUIComponent.MULTIVALUE) && /* @__PURE__ */ jsx3(InlineTip, { label: "Tip", variant: "info", children: uiComponent === AttributeUIComponent.SELECT ? t(
            "attributes.tips.singleSelect",
            "When creating Single Select vendor will be able to choose only one value. This type of attribute will be good for product specifications."
          ) : t(
            "attributes.tips.multiSelect",
            "When creating Multi Select vendor will be able to choose multiple values."
          ) }),
          (uiComponent === AttributeUIComponent.SELECT || uiComponent === AttributeUIComponent.MULTIVALUE) && /* @__PURE__ */ jsx3("div", { "data-testid": "attribute-form-possible-values-section", children: /* @__PURE__ */ jsx3(PossibleValuesList, {}) })
        ]
      }
    );
    return /* @__PURE__ */ jsx3(FormProvider, { ...form, children: /* @__PURE__ */ jsxs3(
      "form",
      {
        id: "attribute-form",
        onSubmit: handleSubmit,
        "data-testid": "attribute-form",
        children: [
          activeTab === "details" && renderDetailsTab(),
          activeTab === "type" && renderTypeTab()
        ]
      }
    ) });
  }
);
AttributeForm.displayName = "AttributeForm";

// src/pages/attributes/attribute-create/attribute-create.tsx
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
var AttributeCreateInner = () => {
  const { t } = useTranslation4();
  const { handleSuccess } = useRouteModal();
  const formRef = useRef2(null);
  const [activeTab, setActiveTab] = useState3("details");
  const [tabStatuses, setTabStatuses] = useState3({
    detailsStatus: "not-started",
    typeStatus: "not-started"
  });
  const { mutateAsync, isPending } = useCreateAttribute();
  const { product_categories: categories = [] } = useProductCategories({
    limit: 999
  });
  const handleSave = async (data) => {
    await mutateAsync(data, {
      onSuccess: () => {
        toast.success(
          t("attributes.create.successToast", {
            name: data.name
          })
        );
        handleSuccess("/settings/attributes");
      },
      onError: (error) => {
        toast.error(error.message);
      }
    });
  };
  const handleTabChange = (value) => {
    const newTab = value;
    if (newTab === "type" && tabStatuses.detailsStatus === "not-started") {
      toast.warning(
        t(
          "attributes.create.fillNameWarning",
          "Please fill in the name first."
        )
      );
      return;
    }
    setActiveTab(newTab);
  };
  const handleNext = async () => {
    if (formRef.current) {
      const isValid = await formRef.current.validateFields(["name"]);
      if (isValid) {
        setActiveTab("type");
      }
    } else {
      setActiveTab("type");
    }
  };
  return /* @__PURE__ */ jsxs4(
    ProgressTabs,
    {
      value: activeTab,
      onValueChange: handleTabChange,
      className: "flex size-full flex-col overflow-hidden",
      "data-testid": "attribute-create-progress-tabs",
      children: [
        /* @__PURE__ */ jsx4(
          RouteFocusModal.Header,
          {
            "data-testid": "attribute-create-modal-header",
            children: /* @__PURE__ */ jsxs4(
              ProgressTabs.List,
              {
                className: "justify-start flex w-full items-center",
                "data-testid": "attribute-create-progress-tabs-list",
                children: [
                  /* @__PURE__ */ jsx4(
                    ProgressTabs.Trigger,
                    {
                      value: "details",
                      status: tabStatuses.detailsStatus,
                      "data-testid": "attribute-create-details-tab",
                      children: t("attributes.create.tabs.details", "Details")
                    }
                  ),
                  /* @__PURE__ */ jsx4(
                    ProgressTabs.Trigger,
                    {
                      value: "type",
                      status: tabStatuses.typeStatus,
                      "data-testid": "attribute-create-type-tab",
                      children: t("attributes.create.tabs.type", "Type")
                    }
                  )
                ]
              }
            )
          }
        ),
        /* @__PURE__ */ jsx4(
          RouteFocusModal.Body,
          {
            className: "flex flex-1 justify-center overflow-auto px-6 py-16",
            "data-testid": "attribute-create-modal-body",
            children: /* @__PURE__ */ jsxs4("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
              /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-1", children: [
                /* @__PURE__ */ jsx4(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx4(Heading, { "data-testid": "attribute-create-modal-heading", children: t("attributes.create.header", "Create Attribute") }) }),
                /* @__PURE__ */ jsx4(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx4(
                  Text3,
                  {
                    size: "small",
                    className: "text-ui-fg-subtle",
                    "data-testid": "attribute-create-modal-subtitle",
                    children: t(
                      "attributes.create.subtitle",
                      "Define a new product attribute."
                    )
                  }
                ) })
              ] }),
              /* @__PURE__ */ jsx4(
                AttributeForm,
                {
                  ref: formRef,
                  onSubmit: handleSave,
                  categories,
                  mode: "create",
                  activeTab,
                  onFormStateChange: setTabStatuses
                }
              )
            ] })
          }
        ),
        /* @__PURE__ */ jsx4(RouteFocusModal.Footer, { "data-testid": "attribute-create-modal-footer", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-2", children: [
          /* @__PURE__ */ jsx4(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx4(
            Button2,
            {
              size: "small",
              variant: "secondary",
              type: "button",
              "data-testid": "attribute-create-modal-cancel-button",
              children: t("actions.cancel", "Cancel")
            }
          ) }),
          activeTab === "details" ? /* @__PURE__ */ jsx4(
            Button2,
            {
              size: "small",
              type: "button",
              onClick: handleNext,
              "data-testid": "attribute-create-modal-next-button",
              children: t("actions.continue", "Next")
            }
          ) : /* @__PURE__ */ jsx4(
            Button2,
            {
              size: "small",
              type: "submit",
              form: "attribute-form",
              isLoading: isPending,
              "data-testid": "attribute-create-modal-save-button",
              children: t("actions.save", "Save")
            }
          )
        ] }) })
      ]
    }
  );
};
var AttributeCreate = () => {
  return /* @__PURE__ */ jsx4(RouteFocusModal, { "data-testid": "attribute-create-modal", children: /* @__PURE__ */ jsx4(AttributeCreateInner, {}) });
};
export {
  AttributeCreate as Component
};
