var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/authentication/admin/ChannelAuthSetting/CollectInfo/index.tsx
var CollectInfo_exports = {};
__export(CollectInfo_exports, {
  default: () => CollectInfo_default
});
module.exports = __toCommonJS(CollectInfo_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_icons = require("@ant-design/icons");
var import_core = require("@dnd-kit/core");
var import_sortable = require("@dnd-kit/sortable");
var import_utilities = require("@dnd-kit/utilities");
var import_classnames = __toESM(require("classnames"));
var import_utils = require("@pisell/utils");
var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
var import_locales = __toESM(require("./locales"));
var import_CollectInfo = require("./CollectInfo.less");
var { TextArea } = import_antd.Input;
var { Title, Paragraph } = import_antd.Typography;
var DEFAULT_ACCOUNT_FIELDS = [
  {
    id: "phone",
    name: "collect.info.field.phone",
    description: "collect.info.field.phone.desc",
    checked: true,
    required: "optional"
  },
  {
    id: "email",
    name: "collect.info.field.email",
    description: "collect.info.field.email.desc",
    checked: false,
    required: "optional"
  },
  {
    id: "avatar",
    name: "collect.info.field.avatar",
    description: "",
    checked: false,
    required: "optional"
  },
  {
    id: "nickname",
    name: "collect.info.field.nickname",
    description: "",
    checked: true,
    required: "optional"
  },
  {
    id: "gender",
    name: "collect.info.field.gender",
    description: "",
    checked: true,
    required: "optional"
  },
  {
    id: "name",
    name: "collect.info.field.name",
    description: "",
    checked: false,
    required: "required"
  }
];
var DEFAULT_CUSTOMER_FORMS = [
  {
    id: "waiver-test-1",
    name: "waivertest-1",
    waiver: "skip"
  },
  {
    id: "minor",
    name: "Minor(未成年人)简体中文",
    waiver: "skip"
  }
];
var DEFAULT_TRANSLATION = {
  en: "Please provide the following account information to help us serve you better. Make sure your information is accurate.111",
  "zh-CN": "请提供以下账户信息以帮助我们更好地为您服务。请确保您的信息准确。111",
  "zh-HK": "請提供以下賬戶信息以幫助我們更好地為您服務。請確保您的信息準確。111",
  ja: "以下のアカウント情報を提供してください。正確な情報を確認してください。111",
  pt: "Por favor, forneça as seguintes informações da conta para nos ajudar a melhorar o nosso atendimento. Certifique-se de que suas informações são precisas.111",
  original: "Please provide the following account information to help us serve you better. Make sure your information is accurate.111"
};
var TranslationInput = ({
  value = DEFAULT_TRANSLATION,
  onChange,
  disabled,
  placeholder
}) => {
  const [open, setOpen] = (0, import_react.useState)(false);
  const languageConfig = [
    { key: "original", label: "Original" },
    { key: "en", label: "English" },
    { key: "zh-CN", label: "简体中文" },
    { key: "zh-HK", label: "繁體中文" }
  ];
  const hasAnyTranslation = () => {
    if (!value) {
      return false;
    }
    return Object.entries(value).some(([key, val]) => key !== "original" && val);
  };
  const handleInputChange = (lang) => (e) => {
    const newValue = {
      ...value,
      [lang]: e.target.value
    };
    onChange == null ? void 0 : onChange(newValue);
  };
  const content = /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-translation-popover", style: { display: "flex", flexDirection: "column", gap: "16px" } }, languageConfig.map(({ key, label }) => /* @__PURE__ */ import_react.default.createElement("div", { key, className: "pisell-collect-info-translation-field" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-translation-label" }, label), /* @__PURE__ */ import_react.default.createElement(
    TextArea,
    {
      value: (value == null ? void 0 : value[key]) || "",
      onChange: handleInputChange(key),
      rows: 3,
      allowClear: true
    }
  ))));
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-translation-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
    TextArea,
    {
      value: (value == null ? void 0 : value.original) || "",
      onChange: handleInputChange("original"),
      placeholder,
      disabled,
      className: "pisell-collect-info-translation-input",
      rows: 3
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_antd.Popover,
    {
      content,
      trigger: "click",
      open,
      onOpenChange: (open2) => {
        if (disabled) {
          return;
        }
        setOpen(open2);
      },
      placement: "bottom"
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: (0, import_classnames.default)("pisell-collect-info-translation-icon-wrapper", {
          "has-translation": hasAnyTranslation(),
          disabled
        })
      },
      /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, { className: "pisell-collect-info-translation-icon" })
    )
  ));
};
var SortableFieldItem = ({
  field,
  onCheckChange,
  onRequiredChange
}) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_sortable.useSortable)({
    id: field.id
  });
  const style = {
    transform: import_utilities.CSS.Transform.toString(transform),
    transition
  };
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: setNodeRef,
      style,
      className: (0, import_classnames.default)("pisell-collect-info-field-item", {
        "pisell-collect-info-dragging": isDragging
      })
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-field-drag", ...attributes, ...listeners }, /* @__PURE__ */ import_react.default.createElement(import_icons.HolderOutlined, null)),
    /* @__PURE__ */ import_react.default.createElement(
      import_antd.Checkbox,
      {
        className: "pisell-collect-info-field-checkbox",
        checked: field.checked,
        onChange: (e) => onCheckChange(e.target.checked)
      }
    ),
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-field-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-field-name" }, import_utils.locales.getText(field.name)), field.description && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-field-description" }, import_utils.locales.getText(field.description))),
    /* @__PURE__ */ import_react.default.createElement(
      import_antd.Select,
      {
        className: "pisell-collect-info-field-select",
        value: field.required,
        onChange: onRequiredChange,
        options: [
          { label: import_utils.locales.getText("collect.info.optional"), value: "optional" },
          { label: import_utils.locales.getText("collect.info.required"), value: "required" }
        ]
      }
    )
  );
};
var SortableFormItem = ({
  form,
  onCheckChange,
  onWaiverChange
}) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_sortable.useSortable)({
    id: form.id
  });
  const style = {
    transform: import_utilities.CSS.Transform.toString(transform),
    transition
  };
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: setNodeRef,
      style,
      className: (0, import_classnames.default)("pisell-collect-info-form-item", {
        "pisell-collect-info-dragging": isDragging
      })
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-form-drag", ...attributes, ...listeners }, /* @__PURE__ */ import_react.default.createElement(import_icons.HolderOutlined, null)),
    /* @__PURE__ */ import_react.default.createElement(import_antd.Checkbox, { className: "pisell-collect-info-form-checkbox", onChange: (e) => onCheckChange(e.target.checked) }),
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-form-name" }, form.name),
    /* @__PURE__ */ import_react.default.createElement(
      import_antd.Select,
      {
        className: "pisell-collect-info-form-select",
        value: form.waiver,
        onChange: onWaiverChange,
        options: [
          { label: import_utils.locales.getText("collect.info.skip"), value: "skip" },
          { label: import_utils.locales.getText("collect.info.disallow.skip"), value: "required" }
        ]
      }
    )
  );
};
var CollectInfo = ({ className, style, value, onChange }) => {
  var _a, _b;
  const context = (0, import_useEngineContext.default)();
  const currentLocale = ((_b = (_a = context == null ? void 0 : context.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "en";
  import_utils.locales.init(import_locales.default, currentLocale);
  const [enableCollectInfo, setEnableCollectInfo] = (0, import_react.useState)(
    (value == null ? void 0 : value.enableCollectInfo) ?? true
  );
  const [collectAccountInfo, setCollectAccountInfo] = (0, import_react.useState)(
    (value == null ? void 0 : value.collectAccountInfo) ?? true
  );
  const [allowSkip, setAllowSkip] = (0, import_react.useState)((value == null ? void 0 : value.allowSkip) ?? false);
  const [promptMessage, setPromptMessage] = (0, import_react.useState)(
    (value == null ? void 0 : value.promptMessage) || DEFAULT_TRANSLATION
  );
  const [accountFields, setAccountFields] = (0, import_react.useState)(
    (value == null ? void 0 : value.accountFields) || DEFAULT_ACCOUNT_FIELDS
  );
  const [customerForms, setCustomerForms] = (0, import_react.useState)(
    (value == null ? void 0 : value.customerForms) || DEFAULT_CUSTOMER_FORMS
  );
  const sensors = (0, import_core.useSensors)(
    (0, import_core.useSensor)(import_core.PointerSensor, {
      activationConstraint: {
        distance: 8
      }
    }),
    (0, import_core.useSensor)(import_core.KeyboardSensor, {
      coordinateGetter: import_sortable.sortableKeyboardCoordinates
    })
  );
  (0, import_react.useEffect)(() => {
    const newValue = {
      enableCollectInfo,
      collectAccountInfo,
      allowSkip,
      promptMessage,
      accountFields,
      customerForms
    };
    onChange == null ? void 0 : onChange(newValue);
  }, [
    enableCollectInfo,
    collectAccountInfo,
    allowSkip,
    promptMessage,
    accountFields,
    customerForms,
    onChange
  ]);
  const handleFieldDragEnd = (event) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      setAccountFields((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id);
        const newIndex = items.findIndex((item) => item.id === over.id);
        return (0, import_sortable.arrayMove)(items, oldIndex, newIndex);
      });
    }
  };
  const handleFormDragEnd = (event) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      setCustomerForms((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id);
        const newIndex = items.findIndex((item) => item.id === over.id);
        return (0, import_sortable.arrayMove)(items, oldIndex, newIndex);
      });
    }
  };
  const handleFieldCheckChange = (fieldId, checked) => {
    setAccountFields(
      (fields) => fields.map((f) => f.id === fieldId ? { ...f, checked } : f)
    );
  };
  const handleFieldRequiredChange = (fieldId, required) => {
    setAccountFields(
      (fields) => fields.map((f) => f.id === fieldId ? { ...f, required } : f)
    );
  };
  const handleFormCheckChange = (formId, checked) => {
    console.log("Form check change:", formId, checked);
  };
  const handleFormWaiverChange = (formId, waiver) => {
    setCustomerForms(
      (forms) => forms.map((f) => f.id === formId ? { ...f, waiver } : f)
    );
  };
  if (!enableCollectInfo) {
    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-collect-info", className), style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-layout" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-header" }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 4, className: "pisell-collect-info-title" }, import_utils.locales.getText("page.setting.login.form.menu.title")), /* @__PURE__ */ import_react.default.createElement(Paragraph, { className: "pisell-collect-info-description" }, import_utils.locales.getText("page.setting.login.form.menu.desc"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-switch-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-collect-info-switch-label" }, import_utils.locales.getText("collect.info.enable")), /* @__PURE__ */ import_react.default.createElement(import_antd.Switch, { checked: enableCollectInfo, onChange: setEnableCollectInfo }))))));
  }
  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-collect-info", className), style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-layout" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-header" }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 4, className: "pisell-collect-info-title" }, import_utils.locales.getText("page.setting.login.form.menu.title")), /* @__PURE__ */ import_react.default.createElement(Paragraph, { className: "pisell-collect-info-description" }, import_utils.locales.getText("page.setting.login.form.menu.desc"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-switch-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-collect-info-switch-label" }, import_utils.locales.getText("collect.info.enable")), /* @__PURE__ */ import_react.default.createElement(import_antd.Switch, { checked: enableCollectInfo, onChange: setEnableCollectInfo }))), collectAccountInfo && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-switch-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-collect-info-switch-label" }, import_utils.locales.getText("collect.info.allow.skip")), /* @__PURE__ */ import_react.default.createElement(import_antd.Switch, { checked: allowSkip, onChange: setAllowSkip }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-prompt" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-prompt-label" }, import_utils.locales.getText("collect.info.prompt")), /* @__PURE__ */ import_react.default.createElement(
    TranslationInput,
    {
      value: promptMessage,
      onChange: setPromptMessage,
      placeholder: import_utils.locales.getText("collect.info.prompt")
    }
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-fields-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-collect-info-fields-title" }, import_utils.locales.getText("collect.info.fields"))), /* @__PURE__ */ import_react.default.createElement(
    import_core.DndContext,
    {
      sensors,
      collisionDetection: import_core.closestCenter,
      onDragEnd: handleFieldDragEnd
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_sortable.SortableContext,
      {
        items: accountFields.map((f) => f.id),
        strategy: import_sortable.verticalListSortingStrategy
      },
      accountFields.map((field) => /* @__PURE__ */ import_react.default.createElement(
        SortableFieldItem,
        {
          key: field.id,
          field,
          onCheckChange: (checked) => handleFieldCheckChange(field.id, checked),
          onRequiredChange: (required) => handleFieldRequiredChange(field.id, required)
        }
      ))
    )
  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-collect-info-forms-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-collect-info-forms-title" }, import_utils.locales.getText("collect.info.customer.form"))), /* @__PURE__ */ import_react.default.createElement(
    import_core.DndContext,
    {
      sensors,
      collisionDetection: import_core.closestCenter,
      onDragEnd: handleFormDragEnd
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_sortable.SortableContext,
      {
        items: customerForms.map((f) => f.id),
        strategy: import_sortable.verticalListSortingStrategy
      },
      customerForms.map((form) => /* @__PURE__ */ import_react.default.createElement(
        SortableFormItem,
        {
          key: form.id,
          form,
          onCheckChange: (checked) => handleFormCheckChange(form.id, checked),
          onWaiverChange: (waiver) => handleFormWaiverChange(form.id, waiver)
        }
      ))
    )
  )))));
};
var CollectInfo_default = CollectInfo;
