const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_useEngineContext = require("../../../../../hooks/useEngineContext.js");
const require_locales = require("./locales.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _ant_design_icons = require("@ant-design/icons");
let _dnd_kit_core = require("@dnd-kit/core");
let _dnd_kit_sortable = require("@dnd-kit/sortable");
let _dnd_kit_utilities = require("@dnd-kit/utilities");
require("./CollectInfo.less");
//#region src/components/authentication/admin/ChannelAuthSetting/CollectInfo/index.tsx
const { TextArea } = antd.Input;
const { Title, Paragraph } = antd.Typography;
const 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"
	}
];
const DEFAULT_CUSTOMER_FORMS = [{
	id: "waiver-test-1",
	name: "waivertest-1",
	waiver: "skip"
}, {
	id: "minor",
	name: "Minor(未成年人)简体中文",
	waiver: "skip"
}];
const 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"
};
const TranslationInput = ({ value = DEFAULT_TRANSLATION, onChange, disabled, placeholder }) => {
	const [open, setOpen] = (0, 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 = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, value), {}, { [lang]: e.target.value });
		onChange === null || onChange === void 0 || onChange(newValue);
	};
	const content = /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-collect-info-translation-popover",
		style: {
			display: "flex",
			flexDirection: "column",
			gap: "16px"
		}
	}, languageConfig.map(({ key, label }) => /* @__PURE__ */ react.default.createElement("div", {
		key,
		className: "pisell-collect-info-translation-field"
	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-translation-label" }, label), /* @__PURE__ */ react.default.createElement(TextArea, {
		value: (value === null || value === void 0 ? void 0 : value[key]) || "",
		onChange: handleInputChange(key),
		rows: 3,
		allowClear: true
	}))));
	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-translation-wrapper" }, /* @__PURE__ */ react.default.createElement(TextArea, {
		value: (value === null || value === void 0 ? void 0 : value.original) || "",
		onChange: handleInputChange("original"),
		placeholder,
		disabled,
		className: "pisell-collect-info-translation-input",
		rows: 3
	}), /* @__PURE__ */ react.default.createElement(antd.Popover, {
		content,
		trigger: "click",
		open,
		onOpenChange: (open) => {
			if (disabled) return;
			setOpen(open);
		},
		placement: "bottom"
	}, /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)("pisell-collect-info-translation-icon-wrapper", {
		"has-translation": hasAnyTranslation(),
		disabled
	}) }, /* @__PURE__ */ react.default.createElement(_ant_design_icons.GlobalOutlined, { className: "pisell-collect-info-translation-icon" }))));
};
const SortableFieldItem = ({ field, onCheckChange, onRequiredChange }) => {
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({ id: field.id });
	const style = {
		transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
		transition
	};
	return /* @__PURE__ */ react.default.createElement("div", {
		ref: setNodeRef,
		style,
		className: (0, classnames.default)("pisell-collect-info-field-item", { "pisell-collect-info-dragging": isDragging })
	}, /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ className: "pisell-collect-info-field-drag" }, attributes), listeners), /* @__PURE__ */ react.default.createElement(_ant_design_icons.HolderOutlined, null)), /* @__PURE__ */ react.default.createElement(antd.Checkbox, {
		className: "pisell-collect-info-field-checkbox",
		checked: field.checked,
		onChange: (e) => onCheckChange(e.target.checked)
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-field-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-field-name" }, _pisell_utils.locales.getText(field.name)), field.description && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-field-description" }, _pisell_utils.locales.getText(field.description))), /* @__PURE__ */ react.default.createElement(antd.Select, {
		className: "pisell-collect-info-field-select",
		value: field.required,
		onChange: onRequiredChange,
		options: [{
			label: _pisell_utils.locales.getText("collect.info.optional"),
			value: "optional"
		}, {
			label: _pisell_utils.locales.getText("collect.info.required"),
			value: "required"
		}]
	}));
};
const SortableFormItem = ({ form, onCheckChange, onWaiverChange }) => {
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({ id: form.id });
	const style = {
		transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
		transition
	};
	return /* @__PURE__ */ react.default.createElement("div", {
		ref: setNodeRef,
		style,
		className: (0, classnames.default)("pisell-collect-info-form-item", { "pisell-collect-info-dragging": isDragging })
	}, /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ className: "pisell-collect-info-form-drag" }, attributes), listeners), /* @__PURE__ */ react.default.createElement(_ant_design_icons.HolderOutlined, null)), /* @__PURE__ */ react.default.createElement(antd.Checkbox, {
		className: "pisell-collect-info-form-checkbox",
		onChange: (e) => onCheckChange(e.target.checked)
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-form-name" }, form.name), /* @__PURE__ */ react.default.createElement(antd.Select, {
		className: "pisell-collect-info-form-select",
		value: form.waiver,
		onChange: onWaiverChange,
		options: [{
			label: _pisell_utils.locales.getText("collect.info.skip"),
			value: "skip"
		}, {
			label: _pisell_utils.locales.getText("collect.info.disallow.skip"),
			value: "required"
		}]
	}));
};
const CollectInfo = ({ className, style, value, onChange }) => {
	var _context$engine, _value$enableCollectI, _value$collectAccount, _value$allowSkip;
	const context = require_useEngineContext.default();
	const currentLocale = (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en";
	_pisell_utils.locales.init(require_locales.default, currentLocale);
	const [enableCollectInfo, setEnableCollectInfo] = (0, react.useState)((_value$enableCollectI = value === null || value === void 0 ? void 0 : value.enableCollectInfo) !== null && _value$enableCollectI !== void 0 ? _value$enableCollectI : true);
	const [collectAccountInfo, setCollectAccountInfo] = (0, react.useState)((_value$collectAccount = value === null || value === void 0 ? void 0 : value.collectAccountInfo) !== null && _value$collectAccount !== void 0 ? _value$collectAccount : true);
	const [allowSkip, setAllowSkip] = (0, react.useState)((_value$allowSkip = value === null || value === void 0 ? void 0 : value.allowSkip) !== null && _value$allowSkip !== void 0 ? _value$allowSkip : false);
	const [promptMessage, setPromptMessage] = (0, react.useState)((value === null || value === void 0 ? void 0 : value.promptMessage) || DEFAULT_TRANSLATION);
	const [accountFields, setAccountFields] = (0, react.useState)((value === null || value === void 0 ? void 0 : value.accountFields) || DEFAULT_ACCOUNT_FIELDS);
	const [customerForms, setCustomerForms] = (0, react.useState)((value === null || value === void 0 ? void 0 : value.customerForms) || DEFAULT_CUSTOMER_FORMS);
	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor, { activationConstraint: { distance: 8 } }), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
	(0, react.useEffect)(() => {
		onChange === null || onChange === void 0 || onChange({
			enableCollectInfo,
			collectAccountInfo,
			allowSkip,
			promptMessage,
			accountFields,
			customerForms
		});
	}, [
		enableCollectInfo,
		collectAccountInfo,
		allowSkip,
		promptMessage,
		accountFields,
		customerForms,
		onChange
	]);
	const handleFieldDragEnd = (event) => {
		const { active, over } = event;
		if (over && active.id !== over.id) setAccountFields((items) => {
			return (0, _dnd_kit_sortable.arrayMove)(items, items.findIndex((item) => item.id === active.id), items.findIndex((item) => item.id === over.id));
		});
	};
	const handleFormDragEnd = (event) => {
		const { active, over } = event;
		if (over && active.id !== over.id) setCustomerForms((items) => {
			return (0, _dnd_kit_sortable.arrayMove)(items, items.findIndex((item) => item.id === active.id), items.findIndex((item) => item.id === over.id));
		});
	};
	const handleFieldCheckChange = (fieldId, checked) => {
		setAccountFields((fields) => fields.map((f) => f.id === fieldId ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, f), {}, { checked }) : f));
	};
	const handleFieldRequiredChange = (fieldId, required) => {
		setAccountFields((fields) => fields.map((f) => f.id === fieldId ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, 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 ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, f), {}, { waiver }) : f));
	};
	if (!enableCollectInfo) return /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-collect-info", className),
		style
	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-layout" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-header" }, /* @__PURE__ */ react.default.createElement(Title, {
		level: 4,
		className: "pisell-collect-info-title"
	}, _pisell_utils.locales.getText("page.setting.login.form.menu.title")), /* @__PURE__ */ react.default.createElement(Paragraph, { className: "pisell-collect-info-description" }, _pisell_utils.locales.getText("page.setting.login.form.menu.desc"))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-switch-item" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-collect-info-switch-label" }, _pisell_utils.locales.getText("collect.info.enable")), /* @__PURE__ */ react.default.createElement(antd.Switch, {
		checked: enableCollectInfo,
		onChange: setEnableCollectInfo
	}))))));
	return /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-collect-info", className),
		style
	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-layout" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-header" }, /* @__PURE__ */ react.default.createElement(Title, {
		level: 4,
		className: "pisell-collect-info-title"
	}, _pisell_utils.locales.getText("page.setting.login.form.menu.title")), /* @__PURE__ */ react.default.createElement(Paragraph, { className: "pisell-collect-info-description" }, _pisell_utils.locales.getText("page.setting.login.form.menu.desc"))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-switch-item" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-collect-info-switch-label" }, _pisell_utils.locales.getText("collect.info.enable")), /* @__PURE__ */ react.default.createElement(antd.Switch, {
		checked: enableCollectInfo,
		onChange: setEnableCollectInfo
	}))), collectAccountInfo && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-switch-item" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-collect-info-switch-label" }, _pisell_utils.locales.getText("collect.info.allow.skip")), /* @__PURE__ */ react.default.createElement(antd.Switch, {
		checked: allowSkip,
		onChange: setAllowSkip
	}))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-prompt" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-prompt-label" }, _pisell_utils.locales.getText("collect.info.prompt")), /* @__PURE__ */ react.default.createElement(TranslationInput, {
		value: promptMessage,
		onChange: setPromptMessage,
		placeholder: _pisell_utils.locales.getText("collect.info.prompt")
	})), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-fields-header" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-collect-info-fields-title" }, _pisell_utils.locales.getText("collect.info.fields"))), /* @__PURE__ */ react.default.createElement(_dnd_kit_core.DndContext, {
		sensors,
		collisionDetection: _dnd_kit_core.closestCenter,
		onDragEnd: handleFieldDragEnd
	}, /* @__PURE__ */ react.default.createElement(_dnd_kit_sortable.SortableContext, {
		items: accountFields.map((f) => f.id),
		strategy: _dnd_kit_sortable.verticalListSortingStrategy
	}, accountFields.map((field) => /* @__PURE__ */ react.default.createElement(SortableFieldItem, {
		key: field.id,
		field,
		onCheckChange: (checked) => handleFieldCheckChange(field.id, checked),
		onRequiredChange: (required) => handleFieldRequiredChange(field.id, required)
	})))))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-collect-info-forms-header" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-collect-info-forms-title" }, _pisell_utils.locales.getText("collect.info.customer.form"))), /* @__PURE__ */ react.default.createElement(_dnd_kit_core.DndContext, {
		sensors,
		collisionDetection: _dnd_kit_core.closestCenter,
		onDragEnd: handleFormDragEnd
	}, /* @__PURE__ */ react.default.createElement(_dnd_kit_sortable.SortableContext, {
		items: customerForms.map((f) => f.id),
		strategy: _dnd_kit_sortable.verticalListSortingStrategy
	}, customerForms.map((form) => /* @__PURE__ */ react.default.createElement(SortableFormItem, {
		key: form.id,
		form,
		onCheckChange: (checked) => handleFormCheckChange(form.id, checked),
		onWaiverChange: (waiver) => handleFormWaiverChange(form.id, waiver)
	}))))))));
};
//#endregion
exports.default = CollectInfo;
