import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { fn } from "@storybook/test";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import { DocumentTimeline } from "../document-timeline/document-timeline.js";
const DocumentToolbarStory = ({ documentName = "Untitled Document", className, enabledControls = ["undo", "redo", "export", "history"], disableRevisionHistory = false, showSwitchboardLink = false, initialTimelineVisible = false, defaultTimelineVisible = true, canUndo = true, canRedo = false, onUndo, onRedo, onExport, onClose, onSwitchboardLinkClick, onHistoryClick, timelineItems = [], children, ...containerProps }) => {
    const [showTimeline, setShowTimeline] = useState(initialTimelineVisible);
    const isUndoDisabled = !canUndo;
    const isRedoDisabled = !canRedo;
    const isTimelineDisabled = timelineItems.length === 0;
    const handleTimelineToggle = () => {
        if (isTimelineDisabled)
            return;
        setShowTimeline(!showTimeline);
    };
    return (_jsxs("div", { className: "flex w-full flex-col", ...containerProps, children: [_jsxs("div", { className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-slate-50 px-4", className), children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [enabledControls.includes("undo") && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isUndoDisabled
                                    ? "cursor-not-allowed"
                                    : "cursor-pointer active:opacity-70"), onClick: onUndo, disabled: isUndoDisabled, children: _jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isUndoDisabled ? "text-gray-500" : "text-gray-900" }) })), enabledControls.includes("redo") && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRedoDisabled
                                    ? "cursor-not-allowed"
                                    : "cursor-pointer active:opacity-70"), onClick: onRedo, disabled: isRedoDisabled, children: _jsx("div", { className: "-scale-x-100", children: _jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isRedoDisabled ? "text-gray-500" : "text-gray-900" }) }) })), enabledControls.includes("export") && (_jsx("button", { className: "flex h-8 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-3 text-sm active:opacity-70", onClick: onExport, children: _jsx("span", { className: "text-gray-900", children: "Export" }) }))] }), _jsx("div", { className: "flex items-center", children: _jsx("h1", { className: "text-sm font-medium text-gray-500", children: documentName }) }), _jsxs("div", { className: "flex items-center gap-x-2", children: [showSwitchboardLink && (_jsx("button", { className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70", onClick: onSwitchboardLinkClick, children: _jsx(Icon, { name: "Drive", size: 16, className: "text-gray-900" }) })), enabledControls.includes("history") && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", disableRevisionHistory
                                    ? "cursor-not-allowed"
                                    : "cursor-pointer active:opacity-70"), onClick: onHistoryClick, disabled: disableRevisionHistory, children: _jsx(Icon, { name: "History", size: 16, className: disableRevisionHistory ? "text-gray-500" : "text-gray-900" }) })), enabledControls.includes("timeline") && defaultTimelineVisible && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isTimelineDisabled
                                    ? "cursor-not-allowed"
                                    : "cursor-pointer active:opacity-70"), onClick: handleTimelineToggle, disabled: isTimelineDisabled, "aria-pressed": showTimeline, children: _jsx(Icon, { name: "Timeline", size: 16, className: twMerge("text-gray-900", isTimelineDisabled && "opacity-50", showTimeline && "text-blue-600") }) })), _jsx("button", { "aria-label": "Close document", className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70", onClick: onClose, children: _jsx(Icon, { name: "XmarkLight", size: 16, className: "text-gray-900" }) })] })] }), showTimeline && timelineItems.length > 0 && (_jsx("div", { className: "mt-2 w-full", children: _jsx(DocumentTimeline, { timeline: timelineItems, onItemClick: fn() }) })), children] }));
};
const meta = {
    title: "Connect/Components/Document Toolbar",
    component: DocumentToolbarStory,
    parameters: {
        layout: "padded",
    },
    tags: ["autodocs"],
    argTypes: {
        documentName: {
            control: "text",
            description: "The name of the document displayed in the toolbar",
        },
        enabledControls: {
            control: "check",
            options: ["undo", "redo", "export", "history", "timeline"],
            description: "Controls which buttons are shown in the toolbar",
        },
        canUndo: {
            control: "boolean",
            description: "Whether the undo button is enabled",
        },
        canRedo: {
            control: "boolean",
            description: "Whether the redo button is enabled",
        },
        disableRevisionHistory: {
            control: "boolean",
            description: "Whether the revision history button is disabled",
        },
        showSwitchboardLink: {
            control: "boolean",
            description: "Whether to show the switchboard link button",
        },
        defaultTimelineVisible: {
            control: "boolean",
            description: "Whether the timeline toggle button is visible",
        },
        initialTimelineVisible: {
            control: "boolean",
            description: "Whether the timeline is expanded by default",
        },
    },
};
export default meta;
export const Default = {
    args: {
        documentName: "My Document",
        enabledControls: ["undo", "redo", "export", "history"],
        canUndo: true,
        canRedo: false,
        onUndo: fn(),
        onRedo: fn(),
        onExport: fn(),
        onClose: fn(),
        onHistoryClick: fn(),
    },
};
export const AllControlsEnabled = {
    args: {
        documentName: "todo-document",
        enabledControls: ["undo", "redo", "export", "history", "timeline"],
        canUndo: true,
        canRedo: true,
        showSwitchboardLink: true,
        defaultTimelineVisible: true,
        onUndo: fn(),
        onRedo: fn(),
        onExport: fn(),
        onClose: fn(),
        onHistoryClick: fn(),
        onSwitchboardLinkClick: fn(),
        timelineItems: [
            {
                id: "1",
                type: "divider",
                title: "Created document",
                timestampUtcMs: new Date("2024-01-15T10:00:00").getTime().toString(),
            },
            {
                id: "2",
                type: "bar",
                addSize: 2,
                delSize: 0,
                additions: 15,
                deletions: 0,
                timestampUtcMs: new Date("2024-01-15T10:30:00").getTime().toString(),
            },
            {
                id: "3",
                type: "bar",
                addSize: 3,
                delSize: 1,
                additions: 25,
                deletions: 5,
                timestampUtcMs: new Date("2024-01-15T11:00:00").getTime().toString(),
            },
        ],
    },
};
export const UndoRedoDisabled = {
    args: {
        documentName: "New Document",
        enabledControls: ["undo", "redo", "export", "history"],
        canUndo: false,
        canRedo: false,
        onUndo: fn(),
        onRedo: fn(),
        onExport: fn(),
        onClose: fn(),
        onHistoryClick: fn(),
    },
};
export const MinimalControls = {
    args: {
        documentName: "Read Only Document",
        enabledControls: ["export"],
        onExport: fn(),
        onClose: fn(),
    },
};
export const WithSwitchboardLink = {
    args: {
        documentName: "Remote Document",
        enabledControls: ["undo", "redo", "export", "history"],
        canUndo: true,
        canRedo: false,
        showSwitchboardLink: true,
        onUndo: fn(),
        onRedo: fn(),
        onExport: fn(),
        onClose: fn(),
        onHistoryClick: fn(),
        onSwitchboardLinkClick: fn(),
    },
};
export const WithTimelineExpanded = {
    args: {
        documentName: "Document with Timeline",
        enabledControls: ["undo", "redo", "export", "history", "timeline"],
        canUndo: true,
        canRedo: true,
        defaultTimelineVisible: true,
        initialTimelineVisible: true,
        onUndo: fn(),
        onRedo: fn(),
        onExport: fn(),
        onClose: fn(),
        onHistoryClick: fn(),
        timelineItems: [
            {
                id: "1",
                type: "divider",
                title: "Document created",
                timestampUtcMs: new Date("2024-01-10T09:00:00").getTime().toString(),
            },
            {
                id: "2",
                type: "bar",
                addSize: 4,
                delSize: 0,
                additions: 50,
                deletions: 0,
                timestampUtcMs: new Date("2024-01-10T10:00:00").getTime().toString(),
            },
            {
                id: "3",
                type: "bar",
                addSize: 2,
                delSize: 2,
                additions: 12,
                deletions: 8,
                timestampUtcMs: new Date("2024-01-11T14:00:00").getTime().toString(),
            },
            {
                id: "4",
                type: "divider",
                title: "Final revision",
                timestampUtcMs: new Date("2024-01-12T16:00:00").getTime().toString(),
            },
        ],
    },
};
export const HistoryDisabled = {
    args: {
        documentName: "Local Document",
        enabledControls: ["undo", "redo", "export", "history"],
        canUndo: true,
        canRedo: false,
        disableRevisionHistory: true,
        onUndo: fn(),
        onRedo: fn(),
        onExport: fn(),
        onClose: fn(),
        onHistoryClick: fn(),
    },
};
//# sourceMappingURL=document-toolbar.stories.js.map