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