import {
  ChipInput
} from "./chunk-KDE4HKH2.js";
import "./chunk-TKGWSUEI.js";
import {
  KeyboundForm
} from "./chunk-SITRHMZZ.js";
import {
  RouteDrawer,
  useRouteModal
} from "./chunk-GDWBOQI5.js";
import {
  Form
} from "./chunk-3QSRE5LS.js";
import {
  require_dist
} from "./chunk-52KJSIHS.js";
import {
  useFeatureFlags
} from "./chunk-RLRWDHME.js";
import "./chunk-K5324KIX.js";
import "./chunk-FV76G2D7.js";
import "./chunk-GHDLST2P.js";
import "./chunk-YVYYOBAE.js";
import "./chunk-L2NJPDUD.js";
import "./chunk-P7UBW2EI.js";
import "./chunk-MR6REQKT.js";
import "./chunk-EPSDO2MJ.js";
import "./chunk-BHEU34FL.js";
import "./chunk-W34KDYZA.js";
import "./chunk-II3CLUXA.js";
import "./chunk-XKEYHWBS.js";
import "./chunk-J2XUEO2E.js";
import "./chunk-656G74I2.js";
import "./chunk-VWPNMEOE.js";
import "./chunk-O72AIZUN.js";
import "./chunk-VUWAOX7H.js";
import "./chunk-5DKUSZQ7.js";
import "./chunk-DIAWPVYS.js";
import "./chunk-4U2BLH45.js";
import {
  useBatchProductAttributes
} from "./chunk-YAUGB4LD.js";
import "./chunk-A5DJIOHN.js";
import "./chunk-RHKRREUU.js";
import "./chunk-ZA2KFUFR.js";
import "./chunk-DTGEFKK4.js";
import {
  __toESM
} from "./chunk-NBMM2TZK.js";

// src/pages/products/[id]/attributes/create/index.tsx
import { Heading } from "@medusajs/ui";
import { useTranslation as useTranslation2 } from "react-i18next";
import { useParams } from "react-router-dom";

// src/pages/products/[id]/attributes/create/components/create-attribute-form/create-attribute-form.tsx
var import_types = __toESM(require_dist(), 1);
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Button,
  Hint,
  Input,
  Label,
  Switch,
  Textarea,
  toast
} from "@medusajs/ui";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import * as zod from "zod";
var import_types2 = __toESM(require_dist(), 1);
import { jsx, jsxs } from "react/jsx-runtime";
var CreateAttributeForm = ({
  productId
}) => {
  const { t } = useTranslation();
  const { handleSuccess } = useRouteModal();
  const { feature_flags } = useFeatureFlags();
  const isProductRequestEnabled = !!feature_flags?.[import_types.MercurFeatureFlags.PRODUCT_REQUEST];
  const schema = zod.object({
    title: zod.string().trim().min(1, { message: t("products.create.attributes.errors.titleRequired") }),
    values: zod.union([zod.string(), zod.array(zod.string())]).refine(
      (v) => Array.isArray(v) ? v.length > 0 : v.trim().length > 0,
      { message: t("products.create.attributes.errors.valuesRequired") }
    ),
    use_for_variants: zod.boolean()
  });
  const form = useForm({
    defaultValues: {
      title: "",
      values: "",
      use_for_variants: false
    },
    resolver: zodResolver(schema)
  });
  const useForVariants = form.watch("use_for_variants");
  const { mutateAsync: createAttribute, isPending } = useBatchProductAttributes(productId);
  const handleSubmit = form.handleSubmit(async (data) => {
    const values = Array.isArray(data.values) ? data.values : data.values.split(",").map((v) => v.trim()).filter(Boolean);
    await createAttribute(
      {
        add: [
          {
            title: data.title,
            type: data.use_for_variants ? import_types2.AttributeType.MULTI_SELECT : import_types2.AttributeType.TEXT,
            is_variant_axis: data.use_for_variants,
            values
          }
        ]
      },
      {
        onSuccess: () => {
          handleSuccess();
          toast.success(
            isProductRequestEnabled ? t("products.edit.requestSuccessToast") : t("products.edit.attributes.createSuccessToast")
          );
        },
        onError: (error) => {
          toast.error(error.message);
        }
      }
    );
  });
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { onSubmit: handleSubmit, className: "flex h-full flex-col", children: [
    /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4", children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-component shadow-elevation-card-rest rounded-xl p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[min-content,1fr] items-start gap-1.5", children: [
      /* @__PURE__ */ jsx("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx(
        Label,
        {
          size: "xsmall",
          weight: "plus",
          className: "text-ui-fg-subtle",
          children: t("fields.title")
        }
      ) }),
      /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: "title",
          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
            /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
              Input,
              {
                ...field,
                "aria-invalid": fieldState.invalid ? "true" : void 0,
                className: fieldState.invalid ? "bg-ui-bg-field-component shadow-borders-error focus:shadow-borders-error" : "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
                placeholder: t(
                  "products.create.attributes.titlePlaceholder"
                ),
                "data-testid": "create-attribute-title-input"
              }
            ) }),
            /* @__PURE__ */ jsx(Form.ErrorMessage, {})
          ] })
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx(
        Label,
        {
          size: "xsmall",
          weight: "plus",
          className: "text-ui-fg-subtle",
          children: t("fields.values")
        }
      ) }),
      /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: "values",
          render: ({ field: { onChange, value }, fieldState }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
            /* @__PURE__ */ jsx(Form.Control, { children: useForVariants ? /* @__PURE__ */ jsx(
              ChipInput,
              {
                variant: "contrast",
                value: Array.isArray(value) ? value : [],
                onChange,
                "aria-invalid": fieldState.invalid ? "true" : void 0,
                className: fieldState.invalid ? "shadow-borders-error focus-within:!shadow-borders-error" : void 0,
                placeholder: t(
                  "products.create.attributes.valuePlaceholder"
                )
              }
            ) : /* @__PURE__ */ jsx(
              Textarea,
              {
                "aria-invalid": fieldState.invalid ? "true" : void 0,
                className: fieldState.invalid ? "bg-ui-bg-field-component shadow-borders-error focus:shadow-borders-error" : "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
                value: Array.isArray(value) ? value.join(", ") : value ?? "",
                onChange: (e) => onChange(e.target.value),
                placeholder: t(
                  "products.create.attributes.valuePlaceholder"
                ),
                "data-testid": "create-attribute-values-input"
              }
            ) }),
            /* @__PURE__ */ jsx(Form.ErrorMessage, {})
          ] })
        }
      ),
      /* @__PURE__ */ jsx("div", {}),
      /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: "use_for_variants",
          render: ({
            field: { value, onChange: fieldOnChange, ref }
          }) => /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-3 py-1.5", children: [
            /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
              Switch,
              {
                ref,
                className: "shrink-0 rtl:rotate-180",
                checked: value,
                onCheckedChange: (checked) => {
                  fieldOnChange(checked);
                  form.setValue("values", checked ? [] : "", {
                    shouldValidate: false
                  });
                }
              }
            ) }),
            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
              /* @__PURE__ */ jsx(Label, { size: "xsmall", weight: "plus", children: t("products.create.attributes.useForVariants") }),
              /* @__PURE__ */ jsx(Hint, { className: "!txt-small", children: t(
                "products.create.attributes.useForVariantsDescription"
              ) })
            ] })
          ] }) })
        }
      )
    ] }) }) }) }),
    /* @__PURE__ */ jsx(RouteDrawer.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, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
      /* @__PURE__ */ jsx(
        Button,
        {
          size: "small",
          type: "submit",
          isLoading: isPending,
          "data-testid": "create-attribute-submit-button",
          children: t("actions.save")
        }
      )
    ] }) })
  ] }) });
};

// src/pages/products/[id]/attributes/create/index.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var Component = () => {
  const { id } = useParams();
  const { t } = useTranslation2();
  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
    /* @__PURE__ */ jsx2(RouteDrawer.Header, { children: /* @__PURE__ */ jsx2(Heading, { children: t("products.addAttribute") }) }),
    /* @__PURE__ */ jsx2(CreateAttributeForm, { productId: id })
  ] });
};
export {
  Component
};
