import { jsx as _jsx } from "react/jsx-runtime";
import { PH_PACKAGES } from "@powerhousedao/config";
import { useState } from "react";
import { mockPackages, mockReactorOptions } from "../mocks.js";
import { PackageManager } from "./package-manager.js";
const meta = {
    title: "Connect/Components/PackageManager",
    component: PackageManager,
    excludeStories: ["PackageManagerWrapper"],
};
export default meta;
const baseArgs = {
    reactor: "local-reactor",
    reactorOptions: mockReactorOptions,
    packages: mockPackages,
    mutable: true,
};
export function PackageManagerWrapper(args) {
    const finalArgs = { ...baseArgs, ...args };
    const { reactor, onReactorChange, ...rest } = finalArgs;
    const [value, setValue] = useState(reactor ?? "");
    const [packages, setPackages] = useState(finalArgs.packages);
    return (_jsx(PackageManager, { reactor: value, onReactorChange: (value) => (onReactorChange ?? setValue)(value ?? ""), onInstall: () => { }, onUninstall: (name) => {
            setPackages((prev) => prev.filter((p) => p.id !== name));
        }, ...rest, packages: packages }));
}
function PackageManagerStoryWrapper(storyArgs = {}) {
    const defaultArgs = {
        reactor: "local-reactor",
        options: mockReactorOptions,
        packages: mockPackages,
        ...storyArgs,
    };
    return {
        // @ts-expect-error - storybook doesn't support the type
        render: PackageManagerWrapper,
        args: defaultArgs,
    };
}
export const Default = PackageManagerStoryWrapper();
export const WithLoading = PackageManagerStoryWrapper({
    onInstall: () => new Promise((resolve) => setTimeout(() => resolve(), 1000)),
});
export const WithError = PackageManagerStoryWrapper({
    onInstall: (name) => new Promise((_, reject) => setTimeout(() => reject(new Error(`Package "${name}" was not found`)), 1000)),
});
export const Immutable = PackageManagerStoryWrapper({ mutable: false });
export const WithAutoComplete = PackageManagerStoryWrapper({
    packageOptions: [
        ...PH_PACKAGES,
        { packageName: "@test/npm", provider: "github" },
        { packageName: "@test/github", provider: "github" },
        { packageName: "@test/local", provider: "local" },
    ],
});
export const WithManyPackages = {
    ...PackageManagerStoryWrapper(),
    decorators: [
        (Story) => (_jsx("div", { className: "h-[600px]", children: _jsx(Story, {}) })),
    ],
};
//# sourceMappingURL=package-manager.stories.js.map