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/plus/saasDevice/deviceProfile/components/CreateProfileModal/index.tsx
var CreateProfileModal_exports = {};
__export(CreateProfileModal_exports, {
  default: () => CreateProfileModal_default
});
module.exports = __toCommonJS(CreateProfileModal_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_materials = require("@pisell/materials");
var import_icons = require("@ant-design/icons");
var import_classnames = __toESM(require("classnames"));
var import_serve = require("../../serve");
var import_index = require("./index.less");
var EMPTY_DICT = {
  en: "",
  "zh-CN": "",
  "zh-HK": "",
  ja: "",
  pt: "",
  original: ""
};
var COPY_SUFFIX = " (Copy)";
var toLangDict = (val) => {
  if (!val) return { ...EMPTY_DICT };
  if (typeof val === "string") {
    return { ...EMPTY_DICT, original: val, en: val };
  }
  return { ...EMPTY_DICT, ...val };
};
var appendCopySuffix = (val) => {
  const dict = toLangDict(val);
  const result = { ...EMPTY_DICT };
  Object.keys(dict).forEach((k) => {
    const v = dict[k];
    result[k] = v && String(v).trim() ? `${v}${COPY_SUFFIX}` : "";
  });
  return result;
};
var CreateProfileModal = ({
  open,
  onClose,
  onSuccess,
  deviceType,
  getText,
  translation,
  mode = "create",
  sourceProfile,
  variant = "desktop"
}) => {
  const isPhoneVariant = variant === "phone";
  const isDuplicate = mode === "duplicate" && !!sourceProfile;
  const [step, setStep] = (0, import_react.useState)("template");
  const [modelCode, setModelCode] = (0, import_react.useState)(void 0);
  const [templateCode, setTemplateCode] = (0, import_react.useState)(
    void 0
  );
  const [name, setName] = (0, import_react.useState)({ ...EMPTY_DICT });
  const [description, setDescription] = (0, import_react.useState)({ ...EMPTY_DICT });
  const [status, setStatus] = (0, import_react.useState)("active");
  const [submitting, setSubmitting] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => {
    if (!open) {
      setStep("template");
      setModelCode(void 0);
      setTemplateCode(void 0);
      setName({ ...EMPTY_DICT });
      setDescription({ ...EMPTY_DICT });
      setStatus("active");
      setSubmitting(false);
      return;
    }
    if (isDuplicate && sourceProfile) {
      setStep("info");
      setModelCode(sourceProfile.model_code);
      setTemplateCode(sourceProfile.template_code);
      setName(appendCopySuffix(sourceProfile.name));
      setDescription(toLangDict(sourceProfile.description));
      setStatus(sourceProfile.status);
    }
  }, [open, isDuplicate, sourceProfile]);
  const typeName = (0, import_react.useMemo)(
    () => deviceType ? translation(deviceType.name) : "",
    [deviceType, translation]
  );
  const subTitle = (0, import_react.useMemo)(() => {
    if (isDuplicate && sourceProfile) {
      const sourceName = translation(sourceProfile.name);
      return getText("pisell2.saas.device-profile.modal.subtitle.duplicate").replace("{DeviceType}", typeName || "").replace("{ProfileName}", sourceName || "");
    }
    return getText("pisell2.saas.device-profile.modal.subtitle.create").replace(
      "{DeviceType}",
      typeName || ""
    );
  }, [getText, typeName, isDuplicate, sourceProfile, translation]);
  const modelOptions = (0, import_react.useMemo)(
    () => ((deviceType == null ? void 0 : deviceType.active_models) || []).map((m) => ({
      label: translation(m.name),
      value: m.code
    })),
    [deviceType, translation]
  );
  const selectedModel = (0, import_react.useMemo)(
    () => ((deviceType == null ? void 0 : deviceType.active_models) || []).find((m) => m.code === modelCode),
    [deviceType, modelCode]
  );
  const templates = (0, import_react.useMemo)(
    () => (selectedModel == null ? void 0 : selectedModel.active_profile_templates) || [],
    [selectedModel]
  );
  const canNext = !!modelCode && !!templateCode;
  const hasName = (0, import_react.useMemo)(
    () => Object.values(name).some((v) => v && String(v).trim()),
    [name]
  );
  const canCreate = hasName && !submitting;
  const handleNext = () => {
    if (!canNext) return;
    setStep("info");
  };
  const handleBack = () => {
    setStep("template");
  };
  const handleCreate = async () => {
    if (!canCreate || !modelCode || !templateCode) return;
    setSubmitting(true);
    try {
      const payload = {
        model_code: modelCode,
        template_code: templateCode,
        name,
        description,
        setting: null,
        status
      };
      if (isDuplicate) {
        payload.setting = (sourceProfile == null ? void 0 : sourceProfile.setting) || null;
      } else {
        const template = templates.find((t) => t.code === templateCode);
        if (template) {
          payload.setting = template.setting;
        }
      }
      await (0, import_serve.createDeviceProfile)(payload);
      (0, import_materials.PisellToast)({
        content: getText("pisell2.saas.device-profile.message.create-success"),
        duration: 2
      });
      onSuccess();
    } catch (e) {
    } finally {
      setSubmitting(false);
    }
  };
  const renderHeader = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__header" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__title" }, step === "template" ? getText("pisell2.saas.device-profile.modal.title.choose-template") : getText("pisell2.saas.device-profile.modal.title.profile-info")), /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__subtitle" }, subTitle)), /* @__PURE__ */ import_react.default.createElement(
    import_icons.CloseOutlined,
    {
      className: "create-profile-modal__close",
      onClick: onClose
    }
  ));
  const renderTemplateStep = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__body" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
    import_antd.Form.Item,
    {
      required: true,
      label: getText(
        "pisell2.saas.device-profile.modal.field.device-model"
      ),
      help: getText(
        "pisell2.saas.device-profile.modal.help.profile-structure"
      )
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_materials.Select,
      {
        value: modelCode,
        onChange: (val) => {
          setModelCode(val);
          setTemplateCode(void 0);
        },
        placeholder: getText(
          "pisell2.saas.device-profile.modal.placeholder.select-model"
        ),
        options: modelOptions,
        size: "large"
      }
    )
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__section-title" }, getText("pisell2.saas.device-profile.modal.help.select-template")), !modelCode ? /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__empty" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "ContainerOutlined" }), /* @__PURE__ */ import_react.default.createElement("div", null, getText("pisell2.saas.device-profile.modal.empty.no-model"))) : templates.length === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__empty" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "ContainerOutlined" }), /* @__PURE__ */ import_react.default.createElement("div", null, getText("pisell2.saas.device-profile.modal.empty.no-templates"))) : /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__templates" }, templates.map((tpl) => {
    const selected = templateCode === tpl.code;
    return /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        key: tpl.code,
        className: (0, import_classnames.default)("create-profile-modal__template-card", {
          "is-selected": selected
        }),
        onClick: () => setTemplateCode(tpl.code)
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__template-icon" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "FileTextOutlined" })),
      /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__template-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__template-name" }, translation(tpl.name)), tpl.description ? /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__template-desc" }, translation(tpl.description)) : null)
    );
  })));
  const renderInfoStep = () => {
    const modelName = selectedModel ? translation(selectedModel.name) : "";
    return /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__body" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
      import_antd.Form.Item,
      {
        required: true,
        label: getText(
          "pisell2.saas.device-profile.modal.field.profile-name"
        )
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_materials.BaseTranslation,
        {
          value: name,
          onChange: (val) => setName(val),
          placeholder: getText(
            "pisell2.saas.device-profile.modal.placeholder.profile-name"
          ),
          size: "large"
        }
      )
    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__row" }, /* @__PURE__ */ import_react.default.createElement(
      import_antd.Form.Item,
      {
        label: getText(
          "pisell2.saas.device-profile.modal.field.device-type"
        ),
        className: "create-profile-modal__col"
      },
      /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { value: typeName, disabled: true, size: "large" })
    ), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Form.Item,
      {
        label: getText(
          "pisell2.saas.device-profile.modal.field.device-model"
        ),
        className: "create-profile-modal__col"
      },
      /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { value: modelName, disabled: true, size: "large" })
    )), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Form.Item,
      {
        label: getText("pisell2.saas.device-profile.modal.field.status")
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_materials.Select,
        {
          value: status,
          onChange: (val) => setStatus(val),
          size: "large",
          options: [
            {
              label: getText("pisell2.saas.device-profile.status.active"),
              value: "active"
            },
            {
              label: getText("pisell2.saas.device-profile.status.inactive"),
              value: "inactive"
            }
          ]
        }
      )
    ), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Form.Item,
      {
        label: getText(
          "pisell2.saas.device-profile.modal.field.description"
        )
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_materials.BaseTranslation,
        {
          value: description,
          onChange: (val) => setDescription(val),
          placeholder: getText(
            "pisell2.saas.device-profile.modal.placeholder.description"
          ),
          size: "large"
        }
      )
    )));
  };
  const renderFooter = () => {
    if (step === "template") {
      return /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__footer" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "primary", block: true, size: "large", disabled: !canNext, onClick: handleNext }, getText("pisell2.saas.device-profile.modal.button.next")));
    }
    return /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__footer" }, isDuplicate ? null : /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "default", block: true, size: "large", onClick: handleBack }, getText("pisell2.saas.device-profile.modal.button.back")), /* @__PURE__ */ import_react.default.createElement(
      import_materials.Button,
      {
        type: "primary",
        block: true,
        size: "large",
        disabled: !canCreate,
        loading: submitting,
        onClick: handleCreate
      },
      getText("pisell2.saas.device-profile.modal.button.create")
    ));
  };
  return /* @__PURE__ */ import_react.default.createElement(
    import_materials.PisellModal,
    {
      open,
      onCancel: onClose,
      headerDivider: false,
      footer: renderFooter(),
      header: null,
      closable: false,
      width: 640,
      destroyOnClose: true,
      maskClosable: false,
      platform: isPhoneVariant ? "h5" : void 0,
      mobileModalHeight: isPhoneVariant ? "auto" : void 0,
      className: (0, import_classnames.default)(
        "create-profile-modal",
        `create-profile-modal--${variant}`
      ),
      bodyStyle: { padding: isPhoneVariant ? "24px 0" : "0 24px" }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "create-profile-modal__content" }, renderHeader(), step === "template" ? renderTemplateStep() : renderInfoStep())
  );
};
var CreateProfileModal_default = CreateProfileModal;
