import {
  ATTRIBUTE_DETAIL_FIELDS
} from "./chunk-LO7XX5M7.js";
import {
  AttributeUIComponent,
  UpdateAttributeSchema
} from "./chunk-4ZTZTIIM.js";
import {
  HandleInput
} from "./chunk-HJ56YXBU.js";
import {
  Combobox
} from "./chunk-AW77UWCZ.js";
import "./chunk-TKGWSUEI.js";
import {
  KeyboundForm
} from "./chunk-U2ZFCAPX.js";
import {
  RouteDrawer,
  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 {
  useAttribute,
  useUpdateAttribute
} 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-edit/attribute-edit.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import { Button, Input, Select, Switch, Text, Textarea, toast } from "@medusajs/ui";
import { Heading } from "@medusajs/ui";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { jsx, jsxs } from "react/jsx-runtime";
var UI_COMPONENT_LABELS = {
  select: "Single Select",
  multivalue: "Multi Select",
  unit: "Unit",
  toggle: "Toggle",
  text_area: "Text"
};
var AttributeEditForm = ({ attribute }) => {
  const { t } = useTranslation();
  const { handleSuccess } = useRouteModal();
  const { product_categories: allCategories } = useProductCategories({
    limit: 999
  });
  const categoryOptions = (allCategories ?? []).map((cat) => ({
    label: cat.name,
    value: cat.id
  }));
  const form = useForm({
    resolver: zodResolver(UpdateAttributeSchema),
    defaultValues: {
      name: attribute.name ?? "",
      handle: attribute.handle ?? "",
      description: attribute.description ?? "",
      is_filterable: attribute.is_filterable ?? false,
      is_required: attribute.is_required ?? false,
      ui_component: attribute.ui_component ?? "select",
      product_category_ids: (attribute.product_categories ?? []).map(
        (cat) => cat.id
      )
    }
  });
  const { mutateAsync, isPending: isMutating } = useUpdateAttribute(attribute.id);
  const handleSubmit = form.handleSubmit(async (data) => {
    await mutateAsync(data, {
      onSuccess: () => {
        toast.success(
          t("attributes.edit.successToast", { name: data.name || attribute.name })
        );
        handleSuccess();
      },
      onError: (err) => {
        toast.error(err.message);
      }
    });
  });
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, "data-testid": "attribute-edit-form", children: /* @__PURE__ */ jsxs(
    KeyboundForm,
    {
      className: "flex size-full flex-col overflow-hidden",
      onSubmit: handleSubmit,
      children: [
        /* @__PURE__ */ jsxs(
          RouteDrawer.Body,
          {
            className: "flex flex-1 flex-col gap-y-6 overflow-auto",
            "data-testid": "attribute-edit-form-body",
            children: [
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "name",
                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-name-field", children: [
                    /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.name") }),
                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field, size: "small" }) }),
                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                  ] })
                }
              ),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "handle",
                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-handle-field", children: [
                    /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.handle") }),
                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(HandleInput, { ...field }) }),
                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                  ] })
                }
              ),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "description",
                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-description-field", children: [
                    /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.description") }),
                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Textarea, { ...field }) }),
                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                  ] })
                }
              ),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "ui_component",
                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-ui-component-field", children: [
                    /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.type") }),
                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(
                      Select,
                      {
                        value: field.value,
                        onValueChange: field.onChange,
                        children: [
                          /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, {}) }),
                          /* @__PURE__ */ jsx(Select.Content, { children: Object.values(AttributeUIComponent).map((component) => /* @__PURE__ */ jsx(Select.Item, { value: component, children: UI_COMPONENT_LABELS[component] ?? component }, component)) })
                        ]
                      }
                    ) }),
                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                  ] })
                }
              ),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "is_filterable",
                  render: ({ field }) => /* @__PURE__ */ jsx(Form.Item, { "data-testid": "attribute-edit-filterable-field", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
                      Switch,
                      {
                        checked: field.value,
                        onCheckedChange: field.onChange,
                        className: "mt-1"
                      }
                    ) }),
                    /* @__PURE__ */ jsxs("div", { children: [
                      /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.filterable") }),
                      /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: t("attributes.hints.filterable", "If checked, buyers will be able to filter products using this attribute.") })
                    ] })
                  ] }) }) })
                }
              ),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "is_required",
                  render: ({ field }) => /* @__PURE__ */ jsx(Form.Item, { "data-testid": "attribute-edit-required-field", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
                      Switch,
                      {
                        checked: field.value,
                        onCheckedChange: field.onChange,
                        className: "mt-1"
                      }
                    ) }),
                    /* @__PURE__ */ jsxs("div", { children: [
                      /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.required") }),
                      /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: t("attributes.hints.required", "If checked, vendors must set a value for this attribute.") })
                    ] })
                  ] }) }) })
                }
              ),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "product_category_ids",
                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                    /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.category") }),
                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
                      Combobox,
                      {
                        options: categoryOptions,
                        ...field,
                        value: field.value ?? []
                      }
                    ) }),
                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                  ] })
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ jsx(RouteDrawer.Footer, { "data-testid": "attribute-edit-form-footer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", type: "button", children: t("actions.cancel") }) }),
          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isMutating, children: t("actions.save") })
        ] }) })
      ]
    }
  ) });
};
var AttributeEdit = () => {
  const { id } = useParams();
  const { attribute, isPending, isError, error } = useAttribute(id, {
    fields: ATTRIBUTE_DETAIL_FIELDS
  });
  if (isError) {
    throw error;
  }
  if (isPending || !attribute) {
    return null;
  }
  return /* @__PURE__ */ jsxs(RouteDrawer, { "data-testid": "attribute-edit-drawer", children: [
    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: attribute.name }) }),
      /* @__PURE__ */ jsx(RouteDrawer.Description, { className: "sr-only", children: "Edit attribute" })
    ] }),
    /* @__PURE__ */ jsx(AttributeEditForm, { attribute })
  ] });
};
export {
  AttributeEdit as Component
};
