import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useCallback, useLayoutEffect, useState } from "react";
import { twMerge } from "tailwind-merge";
import { ConnectDropdownMenu } from "../../../dropdown-menu/dropdown-menu.js";
const PackageDetail = ({ label, value, }) => {
    return (_jsxs("div", { className: "flex items-start gap-2 text-sm", children: [_jsxs("p", { className: "text-gray-600", children: [label, ":"] }), _jsx("p", { className: "text-gray-600", children: value })] }));
};
export const PackageManagerListItem = (props) => {
    const { package: { name, description, category, publisher, publisherUrl, modules, id, removable, }, mutable, onUninstall, className, } = props;
    const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
    return (_jsxs("li", { className: twMerge("relative flex flex-col items-start rounded-md border border-gray-200 p-3 text-sm leading-5 shadow-sm", className), children: [_jsx("h3", { className: "font-semibold text-gray-900", children: name }), _jsx(PackageDetail, { label: "Description", value: description }), _jsx(PackageDetail, { label: "Category", value: category }), _jsx(PackageDetail, { label: "Publisher", value: publisher }), _jsx(PackageDetail, { label: "Publisher URL", value: _jsx("a", { className: "underline", href: publisherUrl, children: publisherUrl }) }), _jsx("p", { className: "text-sm text-gray-600", children: "Modules included:" }), _jsx("ul", { className: "list-disc pl-5", children: modules.map((module) => (_jsx("li", { children: _jsx("span", { className: "text-gray-600", children: module }) }, module))) }), mutable && removable && (_jsx(ConnectDropdownMenu, { items: [
                    {
                        id: "uninstall",
                        label: "Uninstall",
                        icon: _jsx(Icon, { name: "Trash" }),
                        className: "text-red-900",
                    },
                ], onItemClick: (optionId) => {
                    if (optionId === "uninstall") {
                        onUninstall(id);
                    }
                }, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: _jsx("button", { className: "group absolute right-3 top-3", onClick: (e) => {
                        e.stopPropagation();
                        setIsDropdownMenuOpen(true);
                    }, children: _jsx(Icon, { className: "text-gray-600 group-hover:text-gray-900", name: "VerticalDots" }) }) }))] }));
};
export const PackageManagerList = (props) => {
    const { className, packages, onUninstall, mutable, ...rest } = props;
    const [maxHeight, setMaxHeight] = useState();
    useLayoutEffect(() => {
        const calculateMaxHeight = () => {
            // Modal has py-28 padding (7rem * 2 = 14rem = 224px)
            // Header ~64px, reactor select ~80px, install input ~100px, margins ~48px
            // Total offset from viewport: ~516px
            const viewportHeight = window.innerHeight;
            const availableHeight = viewportHeight - 516;
            setMaxHeight(Math.max(200, availableHeight));
        };
        calculateMaxHeight();
        window.addEventListener("resize", calculateMaxHeight);
        return () => window.removeEventListener("resize", calculateMaxHeight);
    }, []);
    const handleUninstall = useCallback((id) => {
        onUninstall(id);
    }, [onUninstall]);
    return (_jsxs("div", { ...rest, className: twMerge("flex flex-col items-stretch overflow-hidden", className), style: { maxHeight }, children: [_jsx("h3", { className: "mb-4 font-semibold text-gray-900", children: "Installed Packages" }), _jsx("div", { className: "flex-1 overflow-y-auto pr-2", children: _jsx("ul", { className: "flex flex-col items-stretch gap-4 pr-2", children: packages.map((pkg) => (_jsx(PackageManagerListItem, { package: pkg, onUninstall: handleUninstall, mutable: mutable }, pkg.id))) }) })] }));
};
//# sourceMappingURL=package-manager-list.js.map