import {
  TargetForm,
  TargetItem,
  TaxRateRuleReferenceSchema
} from "./chunk-NHAOR25V.js";
import "./chunk-5A4JNOK3.js";
import "./chunk-O5VKW5FL.js";
import "./chunk-LTBX54CI.js";
import "./chunk-LQAAVRET.js";
import "./chunk-AFQS6E4N.js";
import "./chunk-QG6PLWNH.js";
import "./chunk-DBYUB2YI.js";
import "./chunk-4F5GP7J7.js";
import "./chunk-54EPH67T.js";
import "./chunk-JQV7CXEC.js";
import {
  PercentageInput
} from "./chunk-MAEP2UCK.js";
import "./chunk-HINXQTCW.js";
import "./chunk-NOWUEJ74.js";
import "./chunk-VW56KWO2.js";
import "./chunk-TZSOL34K.js";
import "./chunk-25LYVP3C.js";
import "./chunk-HC25LNX7.js";
import "./chunk-2Y3WMGN6.js";
import "./chunk-JHIMVLB2.js";
import "./chunk-PXYDR7WQ.js";
import "./chunk-JRTZWK77.js";
import "./chunk-Z5I2Z6L3.js";
import "./chunk-FWPGOIFA.js";
import "./chunk-DB6ANJBO.js";
import "./chunk-PHOCVOZ5.js";
import "./chunk-WIYFXWRI.js";
import "./chunk-FQERBIVS.js";
import "./chunk-KYPPQGGE.js";
import "./chunk-ZMC7BKLT.js";
import "./chunk-KAZ5BYTQ.js";
import "./chunk-634XVU3D.js";
import {
  currencies,
  getCurrencySymbol
} from "./chunk-IQPN4PZJ.js";
import "./chunk-TKGWSUEI.js";
import {
  KeyboundForm
} from "./chunk-U2ZFCAPX.js";
import "./chunk-INNFZYX2.js";
import "./chunk-LAVHRER2.js";
import {
  useDocumentDirection
} from "./chunk-Y7QKP6QU.js";
import "./chunk-KOURHC2N.js";
import "./chunk-2ZFELO2L.js";
import "./chunk-RT6L7JXU.js";
import "./chunk-26OOAKQ6.js";
import "./chunk-ZQZHFMD7.js";
import "./chunk-I5THQVYP.js";
import "./chunk-VIGX66F7.js";
import "./chunk-CMHI2RPL.js";
import "./chunk-S2WEYEQR.js";
import "./chunk-HO7Z6MC3.js";
import "./chunk-MG4GKUJW.js";
import "./chunk-AYVH6Q5O.js";
import "./chunk-VOHEQ7B5.js";
import "./chunk-C3WE6EFO.js";
import "./chunk-N5IUYCUZ.js";
import "./chunk-7SVLKK6Q.js";
import "./chunk-GR6JUIRU.js";
import "./chunk-ZZO3INVE.js";
import "./chunk-PVZBDWLK.js";
import "./chunk-3B6MTW5G.js";
import "./chunk-VKOE5J66.js";
import "./chunk-DY3XQPHC.js";
import "./chunk-LNAXUDW2.js";
import "./chunk-VVWB3GIK.js";
import "./chunk-HKDFWQ6Q.js";
import "./chunk-SESTTUVM.js";
import "./chunk-THHRRYRS.js";
import "./chunk-UZWFZMOX.js";
import "./chunk-XQNVC4Q7.js";
import {
  RouteFocusModal,
  StackedFocusModal,
  useRouteModal,
  useStackedModal
} 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 "./chunk-7O5NDICV.js";
import "./chunk-46M463BR.js";
import "./chunk-YFRC6GEN.js";
import "./chunk-N6SI4IIT.js";
import "./chunk-JPNPTILP.js";
import "./chunk-DAXXLQKB.js";
import {
  useCreateCommissionRate
} from "./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 {
  useStore
} from "./chunk-FXWKGNRV.js";
import "./chunk-VDKOJ5WD.js";
import "./chunk-DL2ZIXBO.js";
import "./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/commission-rates/commission-rate-create/components/create-commission-rate-form/create-commission-rate-form.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Button,
  CurrencyInput,
  Divider,
  Heading,
  Hint,
  Input,
  Label,
  Select,
  Text,
  clx,
  toast,
  Switch
} from "@medusajs/ui";
import { MagnifyingGlass } from "@medusajs/icons";
import { useEffect } from "react";
import { useFieldArray, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import * as zod from "zod";
import { jsx, jsxs } from "react/jsx-runtime";
var STACKED_MODAL_ID = "cr";
var getStackedModalId = (type) => `${STACKED_MODAL_ID}-${type}`;
var CreateCommissionRateSchema = zod.object({
  name: zod.string().min(1),
  code: zod.string().min(1),
  type: zod.enum(["fixed", "percentage"]),
  target: zod.enum(["item", "shipping"]),
  value: zod.coerce.number().min(0),
  currency_code: zod.string().optional(),
  min_amount: zod.coerce.number().optional(),
  include_tax: zod.boolean(),
  is_enabled: zod.boolean(),
  priority: zod.coerce.number().int().min(0),
  enabled_rules: zod.object({
    product: zod.boolean(),
    product_type: zod.boolean(),
    shipping_option: zod.boolean()
  }),
  product: zod.array(TaxRateRuleReferenceSchema).optional(),
  product_type: zod.array(TaxRateRuleReferenceSchema).optional(),
  shipping_option: zod.array(TaxRateRuleReferenceSchema).optional()
});
var CreateCommissionRateForm = ({
  store
}) => {
  const { t } = useTranslation();
  const { handleSuccess } = useRouteModal();
  const { setIsOpen } = useStackedModal();
  const direction = useDocumentDirection();
  const form = useForm({
    defaultValues: {
      name: "",
      code: "",
      type: "percentage",
      target: "item",
      value: 0,
      currency_code: "",
      min_amount: void 0,
      include_tax: false,
      is_enabled: true,
      priority: 0,
      enabled_rules: {
        product: false,
        product_type: false,
        shipping_option: false
      },
      product: [],
      product_type: [],
      shipping_option: []
    },
    resolver: zodResolver(CreateCommissionRateSchema)
  });
  const storeCurrencies = (store?.supported_currencies ?? []).map(
    (c) => currencies[c.currency_code.toUpperCase()]
  );
  const defaultCurrencyCode = store?.supported_currencies?.[0]?.currency_code ?? "";
  useEffect(() => {
    if (defaultCurrencyCode && !form.getValues("currency_code")) {
      form.setValue("currency_code", defaultCurrencyCode);
    }
  }, [defaultCurrencyCode, form]);
  const { mutateAsync: createCommissionRate, isPending } = useCreateCommissionRate();
  const handleSubmit = form.handleSubmit(async (values) => {
    const rules = [
      ...(values.product || []).map((ref) => ({
        reference: "product" /* PRODUCT */,
        reference_id: ref.value
      })),
      ...(values.product_type || []).map((ref) => ({
        reference: "product_type" /* PRODUCT_TYPE */,
        reference_id: ref.value
      })),
      ...(values.shipping_option || []).map((ref) => ({
        reference: "shipping_option" /* SHIPPING_OPTION */,
        reference_id: ref.value
      }))
    ];
    await createCommissionRate(
      {
        name: values.name,
        code: values.code,
        type: values.type,
        target: values.target,
        value: values.value,
        currency_code: values.currency_code || null,
        min_amount: values.min_amount ?? null,
        include_tax: values.include_tax,
        is_enabled: values.is_enabled,
        priority: values.priority,
        ...rules.length > 0 ? { rules } : {}
      },
      {
        onSuccess: ({ commission_rate }) => {
          toast.success(t("commissionRates.create.successToast"));
          handleSuccess(`../${commission_rate.id}`);
        },
        onError: (e) => {
          toast.error(e.message);
        }
      }
    );
  });
  const watchType = form.watch("type");
  const watchCurrency = form.watch("currency_code");
  const products = useFieldArray({
    control: form.control,
    name: "product" /* PRODUCT */
  });
  const productTypes = useFieldArray({
    control: form.control,
    name: "product_type" /* PRODUCT_TYPE */
  });
  const shippingOptions = useFieldArray({
    control: form.control,
    name: "shipping_option" /* SHIPPING_OPTION */
  });
  const getControls = (type) => {
    switch (type) {
      case "product" /* PRODUCT */:
        return products;
      case "product_type" /* PRODUCT_TYPE */:
        return productTypes;
      case "shipping_option" /* SHIPPING_OPTION */:
        return shippingOptions;
    }
  };
  const referenceTypeOptions = [
    {
      value: "product" /* PRODUCT */,
      label: t("taxRegions.fields.targets.options.product")
    },
    {
      value: "product_type" /* PRODUCT_TYPE */,
      label: t("taxRegions.fields.targets.options.productType")
    },
    {
      value: "shipping_option" /* SHIPPING_OPTION */,
      label: t("taxRegions.fields.targets.options.shippingOption")
    }
  ];
  const searchPlaceholders = {
    ["product" /* PRODUCT */]: t(
      "taxRegions.fields.targets.placeholders.product"
    ),
    ["product_type" /* PRODUCT_TYPE */]: t(
      "taxRegions.fields.targets.placeholders.productType"
    ),
    ["shipping_option" /* SHIPPING_OPTION */]: t(
      "taxRegions.fields.targets.placeholders.shippingOption"
    )
  };
  const getFieldHandler = (type) => {
    const { fields, remove, append } = getControls(type);
    const modalId = getStackedModalId(type);
    return (references) => {
      if (!references.length) {
        form.setValue(type, [], { shouldDirty: true });
        setIsOpen(modalId, false);
        return;
      }
      const newIds = references.map((reference) => reference.value);
      const fieldsToAdd = references.filter(
        (reference) => !fields.some((field) => field.value === reference.value)
      );
      for (const field of fields) {
        if (!newIds.includes(field.value)) {
          remove(fields.indexOf(field));
        }
      }
      append(fieldsToAdd);
      setIsOpen(modalId, false);
    };
  };
  const displayOrder = /* @__PURE__ */ new Set();
  const disableRule = (type) => {
    form.setValue(type, [], { shouldDirty: true });
    form.setValue(`enabled_rules.${type}`, false, { shouldDirty: true });
    displayOrder.delete(type);
  };
  const enableRule = (type) => {
    form.setValue(`enabled_rules.${type}`, true, { shouldDirty: true });
    form.setValue(type, [], { shouldDirty: true });
    displayOrder.add(type);
  };
  const watchedEnabledRules = useWatch({
    control: form.control,
    name: "enabled_rules"
  });
  const addRule = () => {
    const firstDisabledRule = Object.keys(watchedEnabledRules).find(
      (key) => !watchedEnabledRules[key]
    );
    if (firstDisabledRule) {
      enableRule(firstDisabledRule);
    }
  };
  const visibleRuleTypes = referenceTypeOptions.filter((option) => watchedEnabledRules[option.value]).sort((a, b) => {
    const orderArray = Array.from(displayOrder);
    return orderArray.indexOf(b.value) - orderArray.indexOf(a.value);
  });
  const getAvailableRuleTypes = (type) => {
    return referenceTypeOptions.filter((option) => {
      return !visibleRuleTypes.some(
        (visibleOption) => visibleOption.value === option.value
      ) || option.value === type;
    });
  };
  const showAddButton = Object.values(watchedEnabledRules).some(
    (value) => !value
  );
  return /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs(
    KeyboundForm,
    {
      className: "flex h-full flex-col overflow-hidden",
      onSubmit: handleSubmit,
      children: [
        /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex overflow-hidden", children: /* @__PURE__ */ jsx(
          "div",
          {
            className: clx(
              "flex h-full w-full flex-col items-center overflow-y-auto p-16"
            ),
            children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
              /* @__PURE__ */ jsxs("div", { children: [
                /* @__PURE__ */ jsx(Heading, { children: t("commissionRates.create.header") }),
                /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("commissionRates.create.description") })
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "name",
                      render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.name") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "code",
                      render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.code") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  )
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "type",
                      render: ({ field: { onChange, ref, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.type.label") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(Select, { ...field, onValueChange: onChange, children: [
                          /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
                          /* @__PURE__ */ jsxs(Select.Content, { children: [
                            /* @__PURE__ */ jsx(Select.Item, { value: "percentage", children: t("commissionRates.fields.type.percentage") }),
                            /* @__PURE__ */ jsx(Select.Item, { value: "fixed", children: t("commissionRates.fields.type.fixed") })
                          ] })
                        ] }) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "target",
                      render: ({ field: { onChange, ref, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.target.label") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(Select, { ...field, onValueChange: onChange, children: [
                          /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
                          /* @__PURE__ */ jsxs(Select.Content, { children: [
                            /* @__PURE__ */ jsx(Select.Item, { value: "item", children: t("commissionRates.fields.target.item") }),
                            /* @__PURE__ */ jsx(Select.Item, { value: "shipping", children: t("commissionRates.fields.target.shipping") })
                          ] })
                        ] }) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  )
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "currency_code",
                      render: ({ field: { onChange, ref, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.currencyCode") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(Select, { ...field, onValueChange: onChange, children: [
                          /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: t("commissionRates.fields.currencyPlaceholder") }) }),
                          /* @__PURE__ */ jsx(Select.Content, { children: storeCurrencies.map((currency) => /* @__PURE__ */ jsx(
                            Select.Item,
                            {
                              value: currency.code.toLowerCase(),
                              children: currency.name
                            },
                            currency.code
                          )) })
                        ] }) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "value",
                      render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.rate") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: watchType === "percentage" ? /* @__PURE__ */ jsx(
                          PercentageInput,
                          {
                            ...field,
                            value,
                            decimalsLimit: 4,
                            onValueChange: (_value, _name, values) => onChange(values?.float ?? 0)
                          }
                        ) : /* @__PURE__ */ jsx(
                          CurrencyInput,
                          {
                            min: 0,
                            onValueChange: (value2) => onChange(value2 ? parseInt(value2) : ""),
                            code: watchCurrency,
                            symbol: watchCurrency ? getCurrencySymbol(watchCurrency) : "",
                            ...field,
                            value
                          }
                        ) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  )
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "min_amount",
                      render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.minAmount") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
                          CurrencyInput,
                          {
                            min: 0,
                            onValueChange: (value2) => onChange(value2 ? parseInt(value2) : ""),
                            code: watchCurrency,
                            symbol: watchCurrency ? getCurrencySymbol(watchCurrency) : "",
                            ...field,
                            value
                          }
                        ) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Form.Field,
                    {
                      control: form.control,
                      name: "priority",
                      render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                        /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.priority") }),
                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { type: "number", ...field }) }),
                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                      ] })
                    }
                  )
                ] })
              ] }),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "is_enabled",
                  render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
                      /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.enabled") }),
                      /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
                        Switch,
                        {
                          ...field,
                          checked: value,
                          onCheckedChange: onChange
                        }
                      ) })
                    ] }),
                    /* @__PURE__ */ jsx(Form.Hint, { children: t("commissionRates.fields.enabledHint") }),
                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                  ] })
                }
              ),
              /* @__PURE__ */ jsx(
                Form.Field,
                {
                  control: form.control,
                  name: "include_tax",
                  render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
                      /* @__PURE__ */ jsx(Form.Label, { children: t("commissionRates.fields.includeTax") }),
                      /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
                        Switch,
                        {
                          ...field,
                          checked: value,
                          onCheckedChange: onChange
                        }
                      ) })
                    ] }),
                    /* @__PURE__ */ jsx(Form.Hint, { children: t("commissionRates.fields.includeTaxHint") }),
                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
                  ] })
                }
              ),
              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4", children: [
                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
                      /* @__PURE__ */ jsx(
                        Label,
                        {
                          id: "commission_rules_label",
                          htmlFor: "commission_rules",
                          children: t("taxRegions.fields.targets.label")
                        }
                      ),
                      /* @__PURE__ */ jsxs(
                        Text,
                        {
                          size: "small",
                          leading: "compact",
                          className: "text-ui-fg-muted",
                          children: [
                            "(",
                            t("fields.optional"),
                            ")"
                          ]
                        }
                      )
                    ] }),
                    /* @__PURE__ */ jsx(
                      Hint,
                      {
                        id: "commission_rules_description",
                        className: "text-pretty",
                        children: t("taxRegions.fields.targets.hint")
                      }
                    )
                  ] }),
                  showAddButton && /* @__PURE__ */ jsx(
                    Button,
                    {
                      onClick: addRule,
                      type: "button",
                      size: "small",
                      variant: "transparent",
                      className: "text-ui-fg-interactive hover:text-ui-fg-interactive-hover flex-shrink-0",
                      children: t("taxRegions.fields.targets.action")
                    }
                  )
                ] }),
                /* @__PURE__ */ jsx(
                  "div",
                  {
                    id: "commission_rules",
                    "aria-labelledby": "commission_rules_label",
                    "aria-describedby": "commission_rules_description",
                    role: "application",
                    className: "flex flex-col gap-y-3",
                    children: visibleRuleTypes.map((ruleType, index) => {
                      const type = ruleType.value;
                      const label = ruleType.label;
                      const isLast = index === visibleRuleTypes.length - 1;
                      const searchPlaceholder = searchPlaceholders[type];
                      const options = getAvailableRuleTypes(type);
                      const { fields, remove } = getControls(type);
                      const handler = getFieldHandler(type);
                      const modalId = getStackedModalId(type);
                      const handleChangeType = (value) => {
                        disableRule(type);
                        enableRule(value);
                      };
                      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                        Form.Field,
                        {
                          control: form.control,
                          name: ruleType.value,
                          render: ({ field }) => {
                            return /* @__PURE__ */ jsxs(Form.Item, { className: "space-y-0", children: [
                              /* @__PURE__ */ jsx(Form.Label, { className: "sr-only", children: label }),
                              /* @__PURE__ */ jsxs(
                                "div",
                                {
                                  className: clx(
                                    "bg-ui-bg-component shadow-elevation-card-rest transition-fg grid gap-1.5 rounded-xl py-1.5",
                                    "aria-[invalid='true']:shadow-borders-error"
                                  ),
                                  role: "application",
                                  ...field,
                                  children: [
                                    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid gap-1.5 px-1.5 md:grid-cols-2", children: [
                                      isLast ? /* @__PURE__ */ jsxs(
                                        Select,
                                        {
                                          dir: direction,
                                          value: type,
                                          onValueChange: handleChangeType,
                                          children: [
                                            /* @__PURE__ */ jsx(Select.Trigger, { className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
                                            /* @__PURE__ */ jsx(Select.Content, { children: options.map((option) => {
                                              return /* @__PURE__ */ jsx(
                                                Select.Item,
                                                {
                                                  value: option.value,
                                                  children: option.label
                                                },
                                                option.value
                                              );
                                            }) })
                                          ]
                                        }
                                      ) : /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-field shadow-borders-base txt-compact-small rounded-md px-2 py-1.5", children: label }),
                                      /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-field shadow-borders-base txt-compact-small rounded-md px-2 py-1.5", children: t(
                                        "taxRegions.fields.targets.operators.in"
                                      ) })
                                    ] }),
                                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-1.5", children: [
                                      /* @__PURE__ */ jsxs(StackedFocusModal, { id: modalId, children: [
                                        /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                                          "button",
                                          {
                                            type: "button",
                                            className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover shadow-borders-base txt-compact-small text-ui-fg-muted transition-fg focus-visible:shadow-borders-interactive-with-active flex flex-1 items-center gap-x-2 rounded-md px-2 py-1.5 outline-none",
                                            children: [
                                              /* @__PURE__ */ jsx(MagnifyingGlass, {}),
                                              searchPlaceholder
                                            ]
                                          }
                                        ) }),
                                        /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: t("actions.browse") }) }),
                                        /* @__PURE__ */ jsxs(StackedFocusModal.Content, { children: [
                                          /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
                                            /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { className: "sr-only", children: t(
                                              "taxRegions.fields.targets.modal.header"
                                            ) }) }),
                                            /* @__PURE__ */ jsx(StackedFocusModal.Description, { className: "sr-only", children: t(
                                              "taxRegions.fields.targets.hint"
                                            ) })
                                          ] }),
                                          /* @__PURE__ */ jsx(
                                            TargetForm,
                                            {
                                              type: "focus",
                                              referenceType: type,
                                              state: fields,
                                              setState: handler
                                            }
                                          )
                                        ] })
                                      ] }),
                                      /* @__PURE__ */ jsx(
                                        Button,
                                        {
                                          variant: "secondary",
                                          onClick: () => disableRule(type),
                                          type: "button",
                                          children: t("actions.delete")
                                        }
                                      )
                                    ] }),
                                    fields.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
                                      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
                                      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-1.5", children: fields.map((field2, index2) => {
                                        return /* @__PURE__ */ jsx(
                                          TargetItem,
                                          {
                                            index: index2,
                                            label: field2.label,
                                            onRemove: remove,
                                            value: field2.value
                                          },
                                          field2.id
                                        );
                                      }) })
                                    ] }) : null
                                  ]
                                }
                              ),
                              /* @__PURE__ */ jsx(Form.ErrorMessage, { className: "mt-2" })
                            ] });
                          }
                        }
                      ) }, type);
                    })
                  }
                )
              ] })
            ] })
          }
        ) }),
        /* @__PURE__ */ jsxs(RouteFocusModal.Footer, { children: [
          /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: t("actions.save") })
        ] })
      ]
    }
  ) });
};

// src/pages/commission-rates/commission-rate-create/commission-rate-create.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var CommissionRateCreate = () => {
  const { isLoading, store } = useStore();
  return /* @__PURE__ */ jsx2(RouteFocusModal, { children: !isLoading && store && /* @__PURE__ */ jsx2(CreateCommissionRateForm, { store }) });
};
export {
  CommissionRateCreate as Component
};
