import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../../../hooks/useEngineContext.js";
import { AuthMethodCategory } from "./types.js";
import { getDefaultAuthMethods } from "./constants.js";
import locales_default from "./locales.js";
import "./SettingList.js";
import React, { useEffect, useState } from "react";
import { Empty, Switch } from "antd";
import { locales } from "@pisell/utils";
import { Button as Button$1 } from "@pisell/materials";
import classNames from "classnames";
import { HolderOutlined, InfoCircleOutlined, SettingOutlined } 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 "./AuthMethods.less";
//#region src/components/authentication/admin/AuthMethods/index.tsx
const SortableItem = ({ method, onToggle, onSettings, onConfigClick, enableSetting = true }) => {
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: method.id });
	const style = {
		transform: CSS.Transform.toString(transform),
		transition
	};
	const getCategoryClassName = (category) => {
		var _category$toLowerCase;
		return category === null || category === void 0 || (_category$toLowerCase = category.toLowerCase()) === null || _category$toLowerCase === void 0 ? void 0 : _category$toLowerCase.replace(/[^a-z0-9]/g, "-");
	};
	const getCategoryText = (category) => {
		const categoryMap = {
			[AuthMethodCategory.GENERAL]: "auth.category.general",
			[AuthMethodCategory.PASSWORD_FREE]: "auth.category.password-free",
			[AuthMethodCategory.AUTH_FREE]: "auth.category.auth-free",
			[AuthMethodCategory.OAUTH]: "auth.category.oauth"
		};
		return locales.getText(categoryMap[category] || category);
	};
	return /* @__PURE__ */ React.createElement("div", {
		ref: setNodeRef,
		style,
		className: classNames("auth-methods-item", { "auth-methods-dragging": isDragging })
	}, /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({ className: "auth-methods-item-drag" }, attributes), listeners), /* @__PURE__ */ React.createElement(HolderOutlined, null)), /* @__PURE__ */ React.createElement("div", { className: "auth-methods-item-body" }, /* @__PURE__ */ React.createElement("div", { className: "auth-methods-item-icon" }, method.icon), /* @__PURE__ */ React.createElement("div", { className: "auth-methods-item-content" }, /* @__PURE__ */ React.createElement("div", { className: "auth-methods-item-header" }, /* @__PURE__ */ React.createElement("span", { className: "auth-methods-item-title" }, method.title), /* @__PURE__ */ React.createElement("span", { className: classNames("auth-methods-item-category", getCategoryClassName(method.category)) }, getCategoryText(method.category))), /* @__PURE__ */ React.createElement("div", { className: "auth-methods-item-description" }, method.description), method.configLink && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: {
		marginTop: 8,
		fontSize: 12,
		color: "#8c8c8c",
		display: "flex",
		alignItems: "center",
		gap: 4
	} }, /* @__PURE__ */ React.createElement(InfoCircleOutlined, { style: { marginRight: 4 } }), locales.getText(method.configLink), /* @__PURE__ */ React.createElement("div", {
		className: "auth-methods-item-config-link",
		onClick: onConfigClick
	}, /* @__PURE__ */ React.createElement("span", null, locales.getText("auth.oauth.config.link")))))), /* @__PURE__ */ React.createElement("div", { className: "auth-methods-item-actions" }, enableSetting && method.hasSettings && /* @__PURE__ */ React.createElement(Button$1, {
		type: "default",
		icon: /* @__PURE__ */ React.createElement(SettingOutlined, null),
		onClick: () => onSettings()
	}, locales.getText("auth.button.settings")), /* @__PURE__ */ React.createElement(Switch, {
		checked: method.enabled,
		onChange: onToggle,
		disabled: method.disableToggle
	}))));
};
const AuthMethods = ({ className, style, methods: initialMethods, onOrderChange, onToggle, onSettings, onConfigClick, enableSetting = true }) => {
	var _context$engine;
	const context = useEngineContext();
	locales.init(locales_default, (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");
	const [methods, setMethods] = useState(initialMethods || getDefaultAuthMethods());
	useEffect(() => {
		if (initialMethods && initialMethods.length > 0) {
			console.log("AuthMethods 组件同步父组件数据:", initialMethods);
			setMethods([...initialMethods].sort((a, b) => {
				var _a$sort, _b$sort;
				return ((_a$sort = a.sort) !== null && _a$sort !== void 0 ? _a$sort : 0) - ((_b$sort = b.sort) !== null && _b$sort !== void 0 ? _b$sort : 0);
			}));
		}
	}, [initialMethods]);
	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) setMethods((items) => {
			const updatedItems = arrayMove(items, items.findIndex((item) => item.id === active.id), items.findIndex((item) => item.id === over.id)).map((item, index) => _objectSpread2(_objectSpread2({}, item), {}, { sort: index }));
			onOrderChange === null || onOrderChange === void 0 || onOrderChange(updatedItems);
			return updatedItems;
		});
	};
	const handleToggle = (method, enabled) => {
		console.log("AuthMethods handleToggle:", method.id, enabled);
		setMethods((items) => items.map((item) => item.id === method.id ? _objectSpread2(_objectSpread2({}, item), {}, { enabled }) : item));
		onToggle === null || onToggle === void 0 || onToggle(method, enabled);
	};
	const handleSettings = (method) => {
		onSettings === null || onSettings === void 0 || onSettings(method);
	};
	const handleConfigClick = (method) => {
		onConfigClick === null || onConfigClick === void 0 || onConfigClick(method);
	};
	if (!methods || methods.length === 0) return /* @__PURE__ */ React.createElement("div", {
		className: classNames("auth-methods", className),
		style
	}, /* @__PURE__ */ React.createElement("div", { className: "auth-methods-empty" }, /* @__PURE__ */ React.createElement(Empty, { description: "No authentication methods available" })));
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("auth-methods", className),
		style
	}, /* @__PURE__ */ React.createElement(DndContext, {
		sensors,
		collisionDetection: closestCenter,
		onDragEnd: handleDragEnd
	}, /* @__PURE__ */ React.createElement(SortableContext, {
		items: methods.map((m) => m.id),
		strategy: verticalListSortingStrategy
	}, methods.map((method) => /* @__PURE__ */ React.createElement(SortableItem, {
		key: method.id,
		method,
		onToggle: (enabled) => handleToggle(method, enabled),
		onSettings: () => handleSettings(method),
		onConfigClick: method.configLink ? () => handleConfigClick(method) : void 0,
		enableSetting
	})))));
};
//#endregion
export { AuthMethods as default };
