import {
  currencies,
  getCurrencySymbol
} from "./chunk-IQPN4PZJ.js";
import {
  Combobox
} from "./chunk-AW77UWCZ.js";
import {
  useDocumentDirection
} from "./chunk-Y7QKP6QU.js";
import {
  Form
} from "./chunk-3QSRE5LS.js";
import {
  useStore
} from "./chunk-FXWKGNRV.js";

// src/pages/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx
import {
  CurrencyInput,
  DatePicker,
  Heading,
  Input,
  RadioGroup,
  Select,
  Text,
  Textarea
} from "@medusajs/ui";
import { useEffect } from "react";
import { useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { jsx, jsxs } from "react/jsx-runtime";
var CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
  const { t } = useTranslation();
  const { store } = useStore();
  const direction = useDocumentDirection();
  const watchValueType = useWatch({
    control: form.control,
    name: `${fieldScope}budget.type`
  });
  const isTypeSpend = watchValueType === "spend";
  const currencyValue = useWatch({
    control: form.control,
    name: `${fieldScope}budget.currency_code`
  });
  const promotionCurrencyValue = useWatch({
    control: form.control,
    name: `application_method.currency_code`
  });
  const currency = currencyValue || promotionCurrencyValue;
  useEffect(() => {
    form.setValue(`${fieldScope}budget.limit`, null);
    if (isTypeSpend) {
      form.setValue(`campaign.budget.currency_code`, promotionCurrencyValue);
    } else {
      form.setValue(`campaign.budget.currency_code`, null);
    }
  }, [
    promotionCurrencyValue,
    isTypeSpend,
    fieldScope,
    form
  ]);
  if (promotionCurrencyValue) {
    const formCampaignBudget = form.getValues().campaign?.budget;
    const formCampaignCurrency = formCampaignBudget?.currency_code;
    if (formCampaignBudget?.type === "spend" && formCampaignCurrency !== promotionCurrencyValue) {
      form.setValue("campaign.budget.currency_code", promotionCurrencyValue);
    }
  }
  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", "data-testid": "campaign-create-form-fields", children: [
    /* @__PURE__ */ jsxs("div", { "data-testid": "campaign-create-form-fields-header", children: [
      /* @__PURE__ */ jsx(Heading, { "data-testid": "campaign-create-form-fields-heading", children: t("campaigns.create.header") }),
      /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", "data-testid": "campaign-create-form-fields-hint", children: t("campaigns.create.hint") })
    ] }),
    /* @__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: `${fieldScope}name`,
            render: ({ field }) => {
              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "campaign-create-form-fields-name-item", children: [
                /* @__PURE__ */ jsx(Form.Label, { "data-testid": "campaign-create-form-fields-name-label", children: t("fields.name") }),
                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-name-control", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "campaign-create-form-fields-name-input" }) }),
                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-name-error" })
              ] });
            }
          }
        ),
        /* @__PURE__ */ jsx(
          Form.Field,
          {
            control: form.control,
            name: `${fieldScope}campaign_identifier`,
            render: ({ field }) => {
              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "campaign-create-form-fields-identifier-item", children: [
                /* @__PURE__ */ jsx(Form.Label, { "data-testid": "campaign-create-form-fields-identifier-label", children: t("campaigns.fields.identifier") }),
                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-identifier-control", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "campaign-create-form-fields-identifier-input" }) }),
                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-identifier-error" })
              ] });
            }
          }
        )
      ] }),
      /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: `${fieldScope}description`,
          render: ({ field }) => {
            return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "campaign-create-form-fields-description-item", children: [
              /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "campaign-create-form-fields-description-label", children: t("fields.description") }),
              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-description-control", children: /* @__PURE__ */ jsx(Textarea, { ...field, "data-testid": "campaign-create-form-fields-description-input" }) }),
              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-description-error" })
            ] });
          }
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
      /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: `${fieldScope}starts_at`,
          render: ({ field }) => {
            return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "campaign-create-form-fields-starts-at-item", children: [
              /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "campaign-create-form-fields-starts-at-label", children: t("campaigns.fields.start_date") }),
              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-starts-at-control", children: /* @__PURE__ */ jsx(
                DatePicker,
                {
                  granularity: "minute",
                  shouldCloseOnSelect: false,
                  ...field,
                  "data-testid": "campaign-create-form-fields-starts-at-input"
                }
              ) }),
              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-starts-at-error" })
            ] });
          }
        }
      ),
      /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: `${fieldScope}ends_at`,
          render: ({ field }) => {
            return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "campaign-create-form-fields-ends-at-item", children: [
              /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "campaign-create-form-fields-ends-at-label", children: t("campaigns.fields.end_date") }),
              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-ends-at-control", children: /* @__PURE__ */ jsx(
                DatePicker,
                {
                  granularity: "minute",
                  shouldCloseOnSelect: false,
                  ...field,
                  "data-testid": "campaign-create-form-fields-ends-at-input"
                }
              ) }),
              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-ends-at-error" })
            ] });
          }
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("div", { "data-testid": "campaign-create-form-fields-budget-header", children: [
      /* @__PURE__ */ jsx(Heading, { "data-testid": "campaign-create-form-fields-budget-heading", children: t("campaigns.budget.create.header") }),
      /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", "data-testid": "campaign-create-form-fields-budget-hint", children: t("campaigns.budget.create.hint") })
    ] }),
    /* @__PURE__ */ jsx(
      Form.Field,
      {
        control: form.control,
        name: `${fieldScope}budget.type`,
        render: ({ field }) => {
          return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "campaign-create-form-fields-budget-type-item", children: [
            /* @__PURE__ */ jsx(
              Form.Label,
              {
                tooltip: fieldScope?.length && !currency ? t("promotions.tooltips.campaignType") : void 0,
                "data-testid": "campaign-create-form-fields-budget-type-label",
                children: t("campaigns.budget.fields.type")
              }
            ),
            /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-budget-type-control", children: /* @__PURE__ */ jsxs(
              RadioGroup,
              {
                dir: direction,
                className: "flex gap-x-4 gap-y-3",
                ...field,
                onValueChange: field.onChange,
                "data-testid": "campaign-create-form-fields-budget-type-radio-group",
                children: [
                  /* @__PURE__ */ jsx(
                    RadioGroup.ChoiceBox,
                    {
                      className: "flex-1",
                      value: "usage",
                      label: t("campaigns.budget.type.usage.title"),
                      description: t("campaigns.budget.type.usage.description"),
                      "data-testid": "campaign-create-form-fields-budget-type-option-usage"
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    RadioGroup.ChoiceBox,
                    {
                      className: "flex-1",
                      value: "spend",
                      label: t("campaigns.budget.type.spend.title"),
                      description: t("campaigns.budget.type.spend.description"),
                      disabled: fieldScope?.length ? !currency : false,
                      "data-testid": "campaign-create-form-fields-budget-type-option-spend"
                    }
                  )
                ]
              }
            ) }),
            /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-budget-type-error" })
          ] });
        }
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
      isTypeSpend && /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: `${fieldScope}budget.currency_code`,
          render: ({ field: { onChange, ref, ...field } }) => {
            return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "campaign-create-form-fields-budget-currency-item", children: [
              /* @__PURE__ */ jsx(
                Form.Label,
                {
                  tooltip: fieldScope?.length && !currency ? t("promotions.campaign_currency.tooltip") : void 0,
                  "data-testid": "campaign-create-form-fields-budget-currency-label",
                  children: t("fields.currency")
                }
              ),
              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-budget-currency-control", children: /* @__PURE__ */ jsxs(
                Select,
                {
                  dir: direction,
                  ...field,
                  onValueChange: onChange,
                  disabled: !!fieldScope.length,
                  "data-testid": "campaign-create-form-fields-budget-currency-select",
                  children: [
                    /* @__PURE__ */ jsx(Select.Trigger, { ref, "data-testid": "campaign-create-form-fields-budget-currency-select-trigger", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
                    /* @__PURE__ */ jsx(Select.Content, { "data-testid": "campaign-create-form-fields-budget-currency-select-content", children: Object.values(currencies).filter(
                      (currency2) => !!store?.supported_currencies?.find(
                        (c) => c.currency_code === currency2.code.toLocaleLowerCase()
                      )
                    ).map((currency2) => /* @__PURE__ */ jsx(
                      Select.Item,
                      {
                        value: currency2.code.toLowerCase(),
                        "data-testid": `campaign-create-form-fields-budget-currency-select-option-${currency2.code.toLowerCase()}`,
                        children: currency2.name
                      },
                      currency2.code
                    )) })
                  ]
                }
              ) }),
              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-budget-currency-error" })
            ] });
          }
        }
      ),
      /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: `${fieldScope}budget.limit`,
          render: ({ field: { onChange, value, ...field } }) => {
            return /* @__PURE__ */ jsxs(Form.Item, { className: "basis-1/2", "data-testid": "campaign-create-form-fields-budget-limit-item", children: [
              /* @__PURE__ */ jsx(
                Form.Label,
                {
                  tooltip: !currency && isTypeSpend ? t("promotions.fields.amount.tooltip") : void 0,
                  "data-testid": "campaign-create-form-fields-budget-limit-label",
                  children: t("campaigns.budget.fields.limit")
                }
              ),
              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-budget-limit-control", children: isTypeSpend ? /* @__PURE__ */ jsx(
                CurrencyInput,
                {
                  min: 0,
                  onValueChange: (value2) => onChange(value2 ? parseInt(value2) : ""),
                  code: currencyValue,
                  symbol: currencyValue ? getCurrencySymbol(currencyValue) : "",
                  ...field,
                  value,
                  disabled: !currency && isTypeSpend,
                  "data-testid": "campaign-create-form-fields-budget-limit-currency-input"
                }
              ) : /* @__PURE__ */ jsx(
                Input,
                {
                  type: "number",
                  ...field,
                  min: 0,
                  value,
                  onChange: (e) => {
                    onChange(
                      e.target.value === "" ? null : parseInt(e.target.value)
                    );
                  },
                  "data-testid": "campaign-create-form-fields-budget-limit-number-input"
                },
                "usage"
              ) }),
              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-budget-limit-error" })
            ] });
          }
        }
      ),
      !isTypeSpend && /* @__PURE__ */ jsx(
        Form.Field,
        {
          control: form.control,
          name: `${fieldScope}budget.attribute`,
          render: ({ field }) => {
            return /* @__PURE__ */ jsxs(Form.Item, { className: "basis-1/2", "data-testid": "campaign-create-form-fields-budget-attribute-item", children: [
              /* @__PURE__ */ jsx(
                Form.Label,
                {
                  tooltip: t(
                    "campaigns.budget.fields.budgetAttributeTooltip"
                  ),
                  "data-testid": "campaign-create-form-fields-budget-attribute-label",
                  children: t("campaigns.budget.fields.budgetAttribute")
                }
              ),
              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "campaign-create-form-fields-budget-attribute-control", children: /* @__PURE__ */ jsx(
                Combobox,
                {
                  ...field,
                  onChange: (e) => {
                    if (typeof e === "undefined") {
                      field.onChange(null);
                    } else {
                      field.onChange(e);
                    }
                  },
                  allowClear: true,
                  options: [
                    {
                      label: t("fields.customer"),
                      value: "customer_id"
                    },
                    {
                      label: t("fields.email"),
                      value: "customer_email"
                    },
                    {
                      label: t("fields.promotionCode"),
                      value: "promotion_code"
                    }
                  ],
                  "data-testid": "campaign-create-form-fields-budget-attribute-combobox"
                },
                "attribute"
              ) }),
              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "campaign-create-form-fields-budget-attribute-error" })
            ] });
          }
        }
      )
    ] })
  ] });
};

export {
  CreateCampaignFormFields
};
