import { PermissionHelper, } from "../../../../Types/Permission";
import React, { useEffect, useMemo, useState, } from "react";
const PermissionPicker = (props) => {
    const [selectedPermission, setSelectedPermission] = useState(props.initialValue || null);
    const [activeGroup, setActiveGroup] = useState(null);
    const [searchQuery, setSearchQuery] = useState("");
    const allPermissions = useMemo(() => {
        return PermissionHelper.getTenantPermissionProps();
    }, []);
    const groupedPermissions = useMemo(() => {
        const map = new Map();
        for (const perm of allPermissions) {
            if (!map.has(perm.group)) {
                map.set(perm.group, []);
            }
            map.get(perm.group).push(perm);
        }
        return map;
    }, [allPermissions]);
    const groups = useMemo(() => {
        return Array.from(groupedPermissions.keys());
    }, [groupedPermissions]);
    // Auto-select the group for the initial value
    useEffect(() => {
        if (props.initialValue && !activeGroup) {
            const match = allPermissions.find((p) => {
                return p.permission === props.initialValue;
            });
            if (match) {
                setActiveGroup(match.group);
            }
        }
    }, [props.initialValue, allPermissions, activeGroup]);
    // Default to first group if none selected
    useEffect(() => {
        if (!activeGroup && groups.length > 0 && !props.initialValue) {
            setActiveGroup(groups[0]);
        }
    }, [activeGroup, groups, props.initialValue]);
    const isSearching = searchQuery.trim().length > 0;
    const lowerQuery = searchQuery.toLowerCase();
    const filteredPermissions = useMemo(() => {
        if (!isSearching) {
            return [];
        }
        return allPermissions.filter((p) => {
            return (p.title.toLowerCase().includes(lowerQuery) ||
                p.description.toLowerCase().includes(lowerQuery));
        });
    }, [allPermissions, isSearching, lowerQuery]);
    const searchMatchCountByGroup = useMemo(() => {
        const counts = new Map();
        if (!isSearching) {
            return counts;
        }
        for (const perm of filteredPermissions) {
            counts.set(perm.group, (counts.get(perm.group) || 0) + 1);
        }
        return counts;
    }, [filteredPermissions, isSearching]);
    const visiblePermissions = useMemo(() => {
        if (isSearching) {
            if (activeGroup) {
                return filteredPermissions.filter((p) => {
                    return p.group === activeGroup;
                });
            }
            return filteredPermissions;
        }
        if (!activeGroup) {
            return [];
        }
        return groupedPermissions.get(activeGroup) || [];
    }, [isSearching, activeGroup, filteredPermissions, groupedPermissions]);
    const handlePermissionClick = (perm) => {
        setSelectedPermission(perm.permission);
        props.onChange(perm.permission);
    };
    const getGroupCount = (group) => {
        var _a;
        if (isSearching) {
            return searchMatchCountByGroup.get(group) || 0;
        }
        return ((_a = groupedPermissions.get(group)) === null || _a === void 0 ? void 0 : _a.length) || 0;
    };
    return (React.createElement("div", { tabIndex: props.tabIndex, onFocus: props.onFocus, onBlur: props.onBlur },
        React.createElement("div", { className: `border rounded-md overflow-hidden ${props.error ? "border-red-400" : "border-gray-300"}`, style: { height: "400px" } },
            React.createElement("div", { className: "border-b border-gray-200 p-2" },
                React.createElement("input", { type: "text", className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none", placeholder: props.placeholder || "Search permissions...", value: searchQuery, onChange: (e) => {
                        setSearchQuery(e.target.value);
                    } })),
            React.createElement("div", { className: "flex", style: { height: "calc(100% - 45px)" } },
                React.createElement("div", { className: "border-r border-gray-200 overflow-y-auto bg-gray-50 flex-shrink-0", style: { width: "200px" } }, groups.map((group) => {
                    const count = getGroupCount(group);
                    const isActive = activeGroup === group;
                    const isDimmed = isSearching && count === 0;
                    return (React.createElement("button", { key: group, type: "button", className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between border-b border-gray-100 transition-colors ${isActive
                            ? "bg-indigo-50 text-indigo-700 font-medium"
                            : isDimmed
                                ? "text-gray-300 cursor-default"
                                : "text-gray-700 hover:bg-gray-100"}`, onClick: () => {
                            if (!isDimmed) {
                                setActiveGroup(group);
                            }
                        } },
                        React.createElement("span", { className: "truncate" }, group),
                        React.createElement("span", { className: `ml-1 text-xs flex-shrink-0 ${isActive ? "text-indigo-500" : "text-gray-400"}` }, count)));
                })),
                React.createElement("div", { className: "flex-1 overflow-y-auto" },
                    visiblePermissions.length === 0 && (React.createElement("div", { className: "flex items-center justify-center h-full text-gray-400 text-sm" }, isSearching
                        ? "No permissions match your search."
                        : "Select a group to view permissions.")),
                    visiblePermissions.map((perm) => {
                        const isSelected = selectedPermission === perm.permission;
                        return (React.createElement("button", { key: perm.permission, type: "button", className: `w-full text-left px-4 py-2.5 border-b border-gray-100 transition-colors ${isSelected
                                ? "bg-indigo-50 border-l-2 border-l-indigo-500"
                                : "hover:bg-gray-50"}`, onClick: () => {
                                handlePermissionClick(perm);
                            } },
                            React.createElement("div", { className: "flex items-start gap-2" },
                                React.createElement("div", { className: "flex-1 min-w-0" },
                                    React.createElement("div", { className: `text-sm font-medium ${isSelected ? "text-indigo-700" : "text-gray-900"}` }, perm.title),
                                    React.createElement("div", { className: "text-xs text-gray-500 mt-0.5" }, perm.description)),
                                isSearching && (React.createElement("span", { className: "inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 flex-shrink-0" }, perm.group)))));
                    })))),
        props.error && (React.createElement("p", { className: "mt-1 text-sm text-red-400" }, props.error))));
};
export default PermissionPicker;
//# sourceMappingURL=PermissionPicker.js.map