import { jsx as _jsx } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import React from "react";
// @ts-expect-error - json file needs { with: "json" } but storybook doesn't support it
import mockPackageJson from "../../../utils/mocks/mock-package-json.json";
import { About } from "./about.js";
import { DangerZone } from "./danger-zone.js";
import { DefaultEditor } from "./default-editor.js";
import { mockDocumentModelEditorOptions } from "./mocks.js";
import { PackageManagerWrapper } from "./package-manager/package-manager.stories.js";
import { SettingsModal } from "./settings-modal.js";
const meta = {
    title: "Connect/Components/Modal/SettingsModalV2",
    component: SettingsModal,
};
export default meta;
const tabs = [
    {
        id: "package-manager",
        icon: _jsx(Icon, { name: "PackageManager", size: 12 }),
        label: "Package Manager",
        content: () => {
            const [reactor, setReactor] = React.useState("");
            return (_jsx(PackageManagerWrapper, { reactor: reactor, onReactorChange: (value) => setReactor(value || "") }));
        },
    },
    {
        id: "default-editors",
        icon: _jsx(Icon, { name: "Edit", size: 12 }),
        label: "Default Editors",
        content() {
            const [editor, setEditor] = React.useState(mockDocumentModelEditorOptions[0].value);
            return (_jsx(DefaultEditor, { documentModelEditor: editor, setDocumentModelEditor: setEditor, documentModelEditorOptions: mockDocumentModelEditorOptions }));
        },
    },
    {
        id: "danger-zone",
        icon: _jsx(Icon, { name: "Danger", size: 12, className: "text-red-900" }),
        label: _jsx("span", { className: "text-red-900", children: "Danger Zone" }),
        content() {
            const [drives, setDrives] = React.useState([
                {
                    header: {
                        id: "1",
                        name: "Drive 1",
                    },
                },
                {
                    header: {
                        id: "2",
                        name: "Drive 2",
                    },
                },
            ]);
            return (_jsx(DangerZone, { drives: drives, onDeleteDrive: (drive) => {
                    setDrives((drives) => drives.filter((d) => d.header.id !== drive.header.id));
                }, onClearStorage: () => setDrives([]) }));
        },
    },
    {
        id: "about",
        icon: _jsx(Icon, { name: "QuestionSquare", size: 12 }),
        label: "About",
        content() {
            return _jsx(About, { packageJson: mockPackageJson });
        },
    },
];
export const Primary = {
    args: {
        open: true,
        title: "Settings",
        tabs,
    },
    decorators: [
        (Story) => (_jsx("div", { className: "h-dvh bg-gray-50", children: _jsx(Story, {}) })),
    ],
    render: function Wrapper(args) {
        return (
        // @ts-expect-error - storybook doesn't support the type
        _jsx(SettingsModal, { ...args }));
    },
};
//# sourceMappingURL=settings-modal.stories.js.map