import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React, { useState } from "react";
import { Switch } from "antd";
import { 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";
//#region src/components/authentication/admin/AuthMethods/components/LoginMethodsList.tsx
const SortableLoginMethod = ({ method, onToggle }) => {
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: method.id });
	const style = {
		transform: CSS.Transform.toString(transform),
		transition
	};
	return /* @__PURE__ */ React.createElement("div", {
		ref: setNodeRef,
		style,
		className: `login-method-item ${isDragging ? "dragging" : ""}`
	}, /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({ className: "login-method-drag" }, attributes), listeners), /* @__PURE__ */ React.createElement(HolderOutlined, null)), /* @__PURE__ */ React.createElement("div", { className: "login-method-content" }, /* @__PURE__ */ React.createElement("div", { className: "login-method-title" }, method.title), /* @__PURE__ */ React.createElement("div", { className: "login-method-description" }, method.description)), /* @__PURE__ */ React.createElement(Switch, {
		checked: method.enabled,
		onChange: onToggle
	}));
};
const LoginMethodsList = ({ methods, onMethodsChange }) => {
	const [loginMethods, setLoginMethods] = useState(methods);
	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
	const handleDragEnd = (event) => {
		const { active, over } = event;
		if (over && active.id !== over.id) setLoginMethods((items) => {
			const newItems = 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 ? _objectSpread2(_objectSpread2({}, item), {}, { enabled }) : item);
		setLoginMethods(newMethods);
		onMethodsChange === null || onMethodsChange === void 0 || onMethodsChange(newMethods);
	};
	return /* @__PURE__ */ React.createElement(DndContext, {
		sensors,
		collisionDetection: closestCenter,
		onDragEnd: handleDragEnd
	}, /* @__PURE__ */ React.createElement(SortableContext, {
		items: loginMethods.map((m) => m.id),
		strategy: verticalListSortingStrategy
	}, /* @__PURE__ */ React.createElement("div", { className: "login-methods-list" }, loginMethods.map((loginMethod) => /* @__PURE__ */ React.createElement(SortableLoginMethod, {
		key: loginMethod.id,
		method: loginMethod,
		onToggle: (enabled) => handleToggleLoginMethod(loginMethod.id, enabled)
	})))));
};
//#endregion
export { LoginMethodsList as default };
