const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
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");
//#region src/components/authentication/admin/AuthMethods/components/LoginMethodsList.tsx
const SortableLoginMethod = ({ method, onToggle }) => {
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({ id: method.id });
	const style = {
		transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
		transition
	};
	return /* @__PURE__ */ react.default.createElement("div", {
		ref: setNodeRef,
		style,
		className: `login-method-item ${isDragging ? "dragging" : ""}`
	}, /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ className: "login-method-drag" }, attributes), listeners), /* @__PURE__ */ react.default.createElement(_ant_design_icons.HolderOutlined, null)), /* @__PURE__ */ react.default.createElement("div", { className: "login-method-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "login-method-title" }, method.title), /* @__PURE__ */ react.default.createElement("div", { className: "login-method-description" }, method.description)), /* @__PURE__ */ react.default.createElement(antd.Switch, {
		checked: method.enabled,
		onChange: onToggle
	}));
};
const LoginMethodsList = ({ methods, onMethodsChange }) => {
	const [loginMethods, setLoginMethods] = (0, react.useState)(methods);
	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 }));
	const handleDragEnd = (event) => {
		const { active, over } = event;
		if (over && active.id !== over.id) setLoginMethods((items) => {
			const newItems = (0, _dnd_kit_sortable.arrayMove)(items, items.findIndex((item) => item.id === active.id), items.findIndex((item) => item.id === over.id));
			onMethodsChange === null || onMethodsChange === void 0 || onMethodsChange(newItems);
			return newItems;
		});
	};
	const handleToggleLoginMethod = (methodId, enabled) => {
		const newMethods = loginMethods.map((item) => item.id === methodId ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { enabled }) : item);
		setLoginMethods(newMethods);
		onMethodsChange === null || onMethodsChange === void 0 || onMethodsChange(newMethods);
	};
	return /* @__PURE__ */ react.default.createElement(_dnd_kit_core.DndContext, {
		sensors,
		collisionDetection: _dnd_kit_core.closestCenter,
		onDragEnd: handleDragEnd
	}, /* @__PURE__ */ react.default.createElement(_dnd_kit_sortable.SortableContext, {
		items: loginMethods.map((m) => m.id),
		strategy: _dnd_kit_sortable.verticalListSortingStrategy
	}, /* @__PURE__ */ react.default.createElement("div", { className: "login-methods-list" }, loginMethods.map((loginMethod) => /* @__PURE__ */ react.default.createElement(SortableLoginMethod, {
		key: loginMethod.id,
		method: loginMethod,
		onToggle: (enabled) => handleToggleLoginMethod(loginMethod.id, enabled)
	})))));
};
//#endregion
exports.default = LoginMethodsList;
