import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _asyncToGenerator } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { createDeviceProfile } from "../../serve.js";
import React, { useEffect, useMemo, useState } from "react";
import { Form, Input } from "antd";
import { BaseTranslation, Button as Button$1, Icon, PisellModal, PisellToast, Select as Select$1 } from "@pisell/materials";
import classNames from "classnames";
import { CloseOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/saasDevice/deviceProfile/components/CreateProfileModal/index.tsx
const EMPTY_DICT = {
	en: "",
	"zh-CN": "",
	"zh-HK": "",
	ja: "",
	pt: "",
	original: ""
};
const COPY_SUFFIX = " (Copy)";
const toLangDict = (val) => {
	if (!val) return _objectSpread2({}, EMPTY_DICT);
	if (typeof val === "string") return _objectSpread2(_objectSpread2({}, EMPTY_DICT), {}, {
		original: val,
		en: val
	});
	return _objectSpread2(_objectSpread2({}, EMPTY_DICT), val);
};
const appendCopySuffix = (val) => {
	const dict = toLangDict(val);
	const result = _objectSpread2({}, EMPTY_DICT);
	Object.keys(dict).forEach((k) => {
		const v = dict[k];
		result[k] = v && String(v).trim() ? `${v}${COPY_SUFFIX}` : "";
	});
	return result;
};
const CreateProfileModal = ({ open, onClose, onSuccess, deviceType, getText, translation, mode = "create", sourceProfile }) => {
	const isDuplicate = mode === "duplicate" && !!sourceProfile;
	const [step, setStep] = useState("template");
	const [modelCode, setModelCode] = useState(void 0);
	const [templateCode, setTemplateCode] = useState(void 0);
	const [name, setName] = useState(_objectSpread2({}, EMPTY_DICT));
	const [description, setDescription] = useState(_objectSpread2({}, EMPTY_DICT));
	const [status, setStatus] = useState("active");
	const [submitting, setSubmitting] = useState(false);
	useEffect(() => {
		if (!open) {
			setStep("template");
			setModelCode(void 0);
			setTemplateCode(void 0);
			setName(_objectSpread2({}, EMPTY_DICT));
			setDescription(_objectSpread2({}, 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 = useMemo(() => deviceType ? translation(deviceType.name) : "", [deviceType, translation]);
	const subTitle = 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 = useMemo(() => ((deviceType === null || deviceType === void 0 ? void 0 : deviceType.active_models) || []).map((m) => ({
		label: translation(m.name),
		value: m.code
	})), [deviceType, translation]);
	const selectedModel = useMemo(() => ((deviceType === null || deviceType === void 0 ? void 0 : deviceType.active_models) || []).find((m) => m.code === modelCode), [deviceType, modelCode]);
	const templates = useMemo(() => (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.active_profile_templates) || [], [selectedModel]);
	const canNext = !!modelCode && !!templateCode;
	const canCreate = useMemo(() => Object.values(name).some((v) => v && String(v).trim()), [name]) && !submitting;
	const handleNext = () => {
		if (!canNext) return;
		setStep("info");
	};
	const handleBack = () => {
		setStep("template");
	};
	const handleCreate = function() {
		var _ref = _asyncToGenerator(function* () {
			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 || sourceProfile === void 0 ? void 0 : sourceProfile.setting) || null;
				else {
					const template = templates.find((t) => t.code === templateCode);
					if (template) payload.setting = template.setting;
				}
				yield createDeviceProfile(payload);
				PisellToast({
					content: getText("pisell2.saas.device-profile.message.create-success"),
					duration: 2
				});
				onSuccess();
			} catch (e) {} finally {
				setSubmitting(false);
			}
		});
		return function handleCreate() {
			return _ref.apply(this, arguments);
		};
	}();
	const renderHeader = () => /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__header" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.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__ */ React.createElement("div", { className: "create-profile-modal__subtitle" }, subTitle)), /* @__PURE__ */ React.createElement(CloseOutlined, {
		className: "create-profile-modal__close",
		onClick: onClose
	}));
	const renderTemplateStep = () => /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__body" }, /* @__PURE__ */ React.createElement(Form, { layout: "vertical" }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(Select$1, {
		value: modelCode,
		onChange: (val) => {
			setModelCode(val);
			setTemplateCode(void 0);
		},
		placeholder: getText("pisell2.saas.device-profile.modal.placeholder.select-model"),
		options: modelOptions,
		size: "large"
	}))), /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__section-title" }, getText("pisell2.saas.device-profile.modal.help.select-template")), !modelCode ? /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__empty" }, /* @__PURE__ */ React.createElement(Icon, { type: "ContainerOutlined" }), /* @__PURE__ */ React.createElement("div", null, getText("pisell2.saas.device-profile.modal.empty.no-model"))) : templates.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__empty" }, /* @__PURE__ */ React.createElement(Icon, { type: "ContainerOutlined" }), /* @__PURE__ */ React.createElement("div", null, getText("pisell2.saas.device-profile.modal.empty.no-templates"))) : /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__templates" }, templates.map((tpl) => {
		const selected = templateCode === tpl.code;
		return /* @__PURE__ */ React.createElement("div", {
			key: tpl.code,
			className: classNames("create-profile-modal__template-card", { "is-selected": selected }),
			onClick: () => setTemplateCode(tpl.code)
		}, /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__template-icon" }, /* @__PURE__ */ React.createElement(Icon, { type: "FileTextOutlined" })), /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__template-content" }, /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__template-name" }, translation(tpl.name)), tpl.description ? /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__template-desc" }, translation(tpl.description)) : null));
	})));
	const renderInfoStep = () => {
		const modelName = selectedModel ? translation(selectedModel.name) : "";
		return /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__body" }, /* @__PURE__ */ React.createElement(Form, { layout: "vertical" }, /* @__PURE__ */ React.createElement(Form.Item, {
			required: true,
			label: getText("pisell2.saas.device-profile.modal.field.profile-name")
		}, /* @__PURE__ */ React.createElement(BaseTranslation, {
			value: name,
			onChange: (val) => setName(val),
			placeholder: getText("pisell2.saas.device-profile.modal.placeholder.profile-name"),
			size: "large"
		})), /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__row" }, /* @__PURE__ */ React.createElement(Form.Item, {
			label: getText("pisell2.saas.device-profile.modal.field.device-type"),
			className: "create-profile-modal__col"
		}, /* @__PURE__ */ React.createElement(Input, {
			value: typeName,
			disabled: true,
			size: "large"
		})), /* @__PURE__ */ React.createElement(Form.Item, {
			label: getText("pisell2.saas.device-profile.modal.field.device-model"),
			className: "create-profile-modal__col"
		}, /* @__PURE__ */ React.createElement(Input, {
			value: modelName,
			disabled: true,
			size: "large"
		}))), /* @__PURE__ */ React.createElement(Form.Item, { label: getText("pisell2.saas.device-profile.modal.field.status") }, /* @__PURE__ */ React.createElement(Select$1, {
			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__ */ React.createElement(Form.Item, { label: getText("pisell2.saas.device-profile.modal.field.description") }, /* @__PURE__ */ React.createElement(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__ */ React.createElement("div", { className: "create-profile-modal__footer" }, /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement(Button$1, {
			type: "primary",
			disabled: !canNext,
			onClick: handleNext
		}, getText("pisell2.saas.device-profile.modal.button.next")));
		return /* @__PURE__ */ React.createElement("div", { className: "create-profile-modal__footer" }, isDuplicate ? /* @__PURE__ */ React.createElement("span", null) : /* @__PURE__ */ React.createElement(Button$1, {
			type: "text",
			onClick: handleBack
		}, getText("pisell2.saas.device-profile.modal.button.back")), /* @__PURE__ */ React.createElement(Button$1, {
			type: "primary",
			disabled: !canCreate,
			loading: submitting,
			onClick: handleCreate
		}, getText("pisell2.saas.device-profile.modal.button.create")));
	};
	return /* @__PURE__ */ React.createElement(PisellModal, {
		open,
		onCancel: onClose,
		headerDivider: false,
		footerDivider: false,
		footer: null,
		header: null,
		closable: false,
		width: 640,
		destroyOnClose: true,
		maskClosable: false,
		className: "create-profile-modal"
	}, /* @__PURE__ */ React.createElement("div", { style: { padding: "24px 0" } }, renderHeader(), step === "template" ? renderTemplateStep() : renderInfoStep(), renderFooter()));
};
//#endregion
export { CreateProfileModal as default };
