import React from "react";
import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
const triggerButtonClassName = "inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50";
const SavedViewsDropdown = (props) => {
    const { ref, isComponentVisible, setIsComponentVisible } = useComponentOutsideClick(false);
    const selectedView = props.savedViews.find((view) => {
        return view.id === props.selectedSavedViewId;
    });
    return (React.createElement("div", { className: "relative", ref: ref },
        React.createElement("button", { type: "button", className: triggerButtonClassName, onClick: () => {
                setIsComponentVisible(!isComponentVisible);
            }, "aria-haspopup": "dialog", "aria-expanded": isComponentVisible },
            React.createElement("span", { className: "max-w-40 truncate" }, (selectedView === null || selectedView === void 0 ? void 0 : selectedView.name) || "Saved Views"),
            React.createElement("span", { className: "text-xs text-gray-400" }, props.savedViews.length.toLocaleString())),
        isComponentVisible && (React.createElement("div", { className: "absolute left-0 z-20 mt-2 w-72 rounded-lg border border-gray-200 bg-white shadow-xl" },
            React.createElement("div", { className: "max-h-72 overflow-y-auto py-1" },
                props.savedViews.length === 0 && (React.createElement("div", { className: "px-3 py-6 text-center text-xs text-gray-400" }, "No saved views yet.")),
                props.savedViews.map((view) => {
                    const isSelected = view.id === props.selectedSavedViewId;
                    return (React.createElement("div", { key: view.id, className: `group flex items-center justify-between gap-2 px-3 py-1.5 ${isSelected ? "bg-indigo-50" : "hover:bg-gray-50"}` },
                        React.createElement("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-2 text-left", onClick: () => {
                                props.onSelect(view.id);
                                setIsComponentVisible(false);
                            } },
                            React.createElement("span", { className: "w-4 shrink-0 text-center text-xs" }, isSelected ? (React.createElement("span", { className: "text-indigo-600" }, "\u2713")) : ("")),
                            React.createElement("span", { className: `truncate text-sm ${isSelected
                                    ? "font-medium text-indigo-700"
                                    : "text-gray-700"}` }, view.name),
                            view.isDefault && (React.createElement("span", { className: "shrink-0 text-[10px] text-gray-400" }, "default"))),
                        React.createElement("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100" },
                            isSelected && props.onUpdateCurrent && (React.createElement("button", { type: "button", className: "rounded px-1.5 py-0.5 text-[11px] text-indigo-600 transition-colors hover:bg-indigo-100", onClick: (event) => {
                                    var _a;
                                    event.stopPropagation();
                                    (_a = props.onUpdateCurrent) === null || _a === void 0 ? void 0 : _a.call(props);
                                    setIsComponentVisible(false);
                                } }, "Update")),
                            props.onEdit && (React.createElement("button", { type: "button", className: "rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700", onClick: (event) => {
                                    var _a;
                                    event.stopPropagation();
                                    (_a = props.onEdit) === null || _a === void 0 ? void 0 : _a.call(props, view.id);
                                    setIsComponentVisible(false);
                                } }, "Edit")),
                            props.onDelete && (React.createElement("button", { type: "button", className: "rounded px-1.5 py-0.5 text-[11px] text-red-500 transition-colors hover:bg-red-50 hover:text-red-600", onClick: (event) => {
                                    var _a;
                                    event.stopPropagation();
                                    (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props, view.id);
                                    setIsComponentVisible(false);
                                } }, "Delete")))));
                })),
            props.onCreate && (React.createElement("div", { className: "border-t border-gray-100 px-3 py-2" },
                React.createElement("button", { type: "button", className: "w-full rounded-md px-2 py-1.5 text-left text-xs font-medium text-indigo-600 transition-colors hover:bg-indigo-50", onClick: () => {
                        var _a;
                        (_a = props.onCreate) === null || _a === void 0 ? void 0 : _a.call(props);
                        setIsComponentVisible(false);
                    } }, "+ Save Current View")))))));
};
export default SavedViewsDropdown;
//# sourceMappingURL=SavedViewsDropdown.js.map