import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Play, X, ArrowRight, Check } from "lucide-react";
export function getDefaultTourSteps({ editContext, nextStep, stopTour, waitForElement, waitForElementToDisappear, delay, waitForInput, }, config) {
    const isMobile = editContext.isMobile;
    const hasPlaceholderTemplate = config.placeholderTemplateId && config.placeholderTemplateName;
    const waitForScrollSettled = (element, options) => {
        const maxWaitMs = options?.maxWaitMs ?? 4000;
        const stableFramesNeeded = options?.stableFrames ?? 6;
        const epsilonPx = options?.epsilonPx ?? 0.75;
        const start = performance.now();
        const rectClose = (a, b) => Math.abs(a.top - b.top) < epsilonPx &&
            Math.abs(a.left - b.left) < epsilonPx &&
            Math.abs(a.width - b.width) < epsilonPx &&
            Math.abs(a.height - b.height) < epsilonPx;
        return new Promise((resolve) => {
            let stableFrames = 0;
            let prev = null;
            const tick = () => {
                if (performance.now() - start >= maxWaitMs) {
                    resolve();
                    return;
                }
                const rect = element.getBoundingClientRect();
                if (prev !== null) {
                    if (rectClose(rect, prev)) {
                        stableFrames++;
                        if (stableFrames >= stableFramesNeeded) {
                            resolve();
                            return;
                        }
                    }
                    else {
                        stableFrames = 0;
                    }
                }
                prev = rect;
                requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
        });
    };
    const scrollToElement = async (selector) => {
        const element = document.querySelector(selector);
        if (!element)
            return;
        element.scrollIntoView({
            block: "center",
            inline: "center",
            behavior: "smooth",
        });
        await waitForScrollSettled(element);
    };
    const ensureMobilePanelSize = async () => {
        const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
        if (!isMobile)
            return;
        await delay(300);
        const formPanel = document.querySelector('[data-testid="editor-sidepanel"]');
        if (!formPanel)
            return;
        const rect = formPanel.getBoundingClientRect();
        if (rect.height < window.innerHeight * 0.45) {
            // Find the splitter handle
            const panelDiv = formPanel.closest(".relative.overflow-hidden");
            const splitterHandle = panelDiv?.previousElementSibling;
            if (splitterHandle &&
                (splitterHandle.classList.contains("cursor-ns-resize") ||
                    splitterHandle.classList.contains("cursor-ew-resize"))) {
                const handleRect = splitterHandle.getBoundingClientRect();
                const startX = handleRect.left + handleRect.width / 2;
                const startY = handleRect.top + handleRect.height / 2;
                const targetY = window.innerHeight * 0.4;
                if (targetY < startY) {
                    splitterHandle.dispatchEvent(new MouseEvent("mousedown", {
                        bubbles: true,
                        clientX: startX,
                        clientY: startY,
                    }));
                    window.dispatchEvent(new MouseEvent("mousemove", {
                        bubbles: true,
                        clientX: startX,
                        clientY: targetY,
                    }));
                    window.dispatchEvent(new MouseEvent("mouseup", {
                        bubbles: true,
                        clientX: startX,
                        clientY: targetY,
                    }));
                    await delay(300);
                }
            }
        }
    };
    const waitForInsertedItemView = (timeoutMs = 10000) => {
        return new Promise((resolve) => {
            const start = performance.now();
            const checkView = () => {
                if (document.querySelector("[data-view='item-editor-view']")) {
                    resolve("non-page");
                    return;
                }
                if (document.querySelector("[data-view='single-edit-view']")) {
                    resolve("page");
                    return;
                }
                if (performance.now() - start >= timeoutMs) {
                    resolve(undefined);
                    return;
                }
                requestAnimationFrame(checkView);
            };
            checkView();
        });
    };
    const isElementVisible = (selector) => {
        const element = document.querySelector(selector);
        if (!element)
            return false;
        const rect = element.getBoundingClientRect();
        const styles = window.getComputedStyle(element);
        return (rect.width > 0 &&
            rect.height > 0 &&
            styles.display !== "none" &&
            styles.visibility !== "hidden" &&
            styles.opacity !== "0");
    };
    const isAgentsPanelOpen = () => {
        return (isElementVisible("[data-testid='add-agent-button']") ||
            isElementVisible("[data-testid='agent-profile-card']") ||
            isElementVisible("[data-testid='agent-terminal-prompt']"));
    };
    const getTemplateSection = () => document.querySelector('[data-testid="new-page-template-section"]');
    const isTourTemplateAvailable = () => {
        const section = getTemplateSection();
        if (!section)
            return false;
        return Array.from(section.querySelectorAll('[data-testid^="template-option-"]')).some((template) => template.textContent
            ?.toLowerCase()
            .includes(config.tourTemplateName.toLowerCase()));
    };
    const tourSteps = {
        "start-tour": {
            title: "Welcome to the Parhelia Tour!",
            description: "I will show you around the editor and how to use the most important features.",
            prepareAction: async () => {
                editContext?.openSplashScreen();
            },
            buttons: [
                {
                    label: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Play, { className: "h-4 w-4" }), " Start Tour"] })),
                    onClick: () => {
                        nextStep("new-page");
                    },
                    className: "button button-primary mt-2",
                },
                {
                    label: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(X, { className: "h-4 w-4" }), " No thanks"] })),
                    onClick: () => {
                        stopTour();
                    },
                    className: "button button-secondary mt-2",
                },
            ],
            /* Example for skipping a step using the config
              skipIf: (config: EditorConfiguration) => {
              const localization = config.localization as any;
              return !localization?.translationManagement;
             },*/
        },
        "new-page": {
            title: "Create a New Page",
            description: (_jsxs(_Fragment, { children: ["Click on the ", _jsx("strong", { children: "New Page" }), " tab to create a new page"] })),
            lockScroll: true,
            focusElement: '#create-new-page-button, [data-testid="create-new-page-button"]',
            bubblePosition: "right",
            prepareAction: async () => {
                await scrollToElement("#create-new-page-button, [data-testid='create-new-page-button']");
            },
            waitForUserInput: async () => {
                await waitForElement(".tour-pick-location");
            },
            nextStep: "pick-location",
        },
        "pick-location": {
            title: "Choose Location",
            description: (_jsxs(_Fragment, { children: ["I suggest picking a ", _jsx("strong", { children: "Home" }), " inside a main site, to ensure the required templates are available."] })),
            lockScroll: {
                allowSelector: "[data-testid='new-page-pick-location-tree']",
            },
            focusElement: "[data-testid='new-page-pick-location-tree']",
            bubblePosition: "right",
            bubbleVerticalAnchor: "center",
            waitForUserInput: async () => {
                const tree = document.querySelector("[data-testid='new-page-pick-location-tree']");
                if (!tree)
                    return;
                await new Promise((resolve) => {
                    tree.addEventListener("click", () => resolve(), { once: true });
                });
                await waitForElement('[data-testid="new-page-template-section"]');
                return "choose-template";
            },
        },
        "choose-template": {
            title: isTourTemplateAvailable()
                ? "Select Template"
                : "Choose another location",
            description: isTourTemplateAvailable() ? (_jsx(_Fragment, { children: "Great, this location works. Select a template for this tour." })) : (_jsxs(_Fragment, { children: ["The required template is not available for the selected location. You may need to select a ", _jsx("strong", { children: " Home" }), " inside a different site branch."] })),
            lockScroll: true,
            focusElement: '[data-testid="new-page-template-section"]',
            prepareAction: async () => {
                await scrollToElement('[data-testid="new-page-template-section"]');
            },
            buttons: isTourTemplateAvailable()
                ? []
                : [
                    {
                        label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4 rotate-180" }), " Choose another location"] })),
                        onClick: () => nextStep("pick-location"),
                        className: "button button-secondary mt-2",
                    },
                ],
            waitForUserInput: async () => {
                return new Promise((resolve) => {
                    const section = document.querySelector('[data-testid="new-page-template-section"]');
                    if (!section)
                        return;
                    const handleClick = (e) => {
                        const t = e.target;
                        const selectedTemplate = t?.closest?.('[data-testid^="template-option-"]');
                        if (!selectedTemplate)
                            return;
                        const isCorrectTemplate = selectedTemplate.textContent
                            ?.toLowerCase()
                            .includes(config.tourTemplateName.toLowerCase());
                        if (!isCorrectTemplate)
                            return;
                        section.removeEventListener("click", handleClick);
                        resolve();
                    };
                    section.addEventListener("click", handleClick);
                });
            },
            bubblePosition: "bottom",
            nextStep: "enter-name",
        },
        "enter-name": {
            title: "Name Your Page",
            description: "Enter a name for your page",
            lockScroll: true,
            focusElement: "#new-page-name",
            bubblePosition: "bottom",
            prepareAction: async () => {
                await scrollToElement("#new-page-name");
            },
            waitForUserInput: async () => {
                await waitForElement("#create-new-page-button:not([disabled])");
            },
            nextStep: "create-page",
        },
        "create-page": {
            title: "Create Page",
            description: "Click the Create button",
            lockScroll: true,
            focusElement: "#create-new-page-button",
            bubblePosition: "right",
            prepareAction: async () => {
                await scrollToElement("#create-new-page-button");
            },
            waitForUserInput: async () => {
                // wait for loading spinner
                await waitForElement("[data-loading-indicator]");
            },
            nextStep: "loading",
        },
        loading: {
            title: "Loading...",
            description: "Waiting for your new page...",
            waitForUserInput: async () => {
                await waitForElementToDisappear("[data-loading-indicator]");
                const insertedItemView = await waitForInsertedItemView();
                if (insertedItemView === "non-page") {
                    return "oopsie-not-a-page";
                }
            },
            nextStep: "welcome",
        },
        "oopsie-not-a-page": {
            title: "Oopsie!",
            description: "That item was created successfully, but it is not a page, so we cannot add components to it.",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(Check, { className: "inline h-4 w-4" }), " Close"] })),
                    onClick: () => stopTour(),
                    className: "button button-primary mt-2",
                },
            ],
        },
        welcome: {
            title: "Welcome to your new page!",
            description: "I will show you around the editor and how to use the most important features.",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4" }), " Lets go!"] })),
                    onClick: () => {
                        nextStep("ready-to-add-component");
                    },
                },
            ],
        },
        "ready-to-add-component": {
            title: "Ready to Add Components",
            description: "Wanna add a component to your beautiful empty page?",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4" }), " I'm ready, lets go!"] })),
                    onClick: () => {
                        if (document.querySelector('#insert-component-button, [data-testid="insert-component-button"]')) {
                            nextStep("insert-component");
                        }
                        else {
                            nextStep("drag-component");
                        }
                    },
                },
            ],
        },
        "insert-component": {
            title: "Insert Component",
            description: "Excellent, click on the plus button to insert a component.",
            focusElement: '#insert-component-button, [data-testid="insert-component-button"]',
            bubblePosition: "right",
            waitForUserInput: async () => {
                await waitForElement(".tour-component-palette");
            },
            nextStep: "drag-component-placeholder",
        },
        "drag-component-placeholder": {
            title: isMobile
                ? `Select ${config.placeholderTemplateName}`
                : `Drag & Drop ${config.placeholderTemplateName}`,
            description: isMobile
                ? `Tap the ${config.placeholderTemplateName} component`
                : `Drag a ${config.placeholderTemplateName} component to your page.`,
            focusElement: `#insert-component-${config.placeholderTemplateId}`,
            bubblePosition: "right",
            skipIf: () => !hasPlaceholderTemplate,
            prepareAction: async () => {
                await ensureMobilePanelSize();
                await waitForElement(".tour-component-palette");
                const itemSelector = `#insert-component-${config.placeholderTemplateId}, [data-testid="insert-component-${config.placeholderTemplateId}"]`;
                await waitForElement(itemSelector);
                await scrollToElement(itemSelector);
            },
            waitForUserInput: async () => {
                //await waitForElement(".tour-placeholder-dropzone");
                await waitForElement(".tour-component-palette");
                const itemSelector = `#insert-component-${config.placeholderTemplateId}, [data-testid="insert-component-${config.placeholderTemplateId}"]`;
                await waitForElement(itemSelector);
                const el = document.querySelector(itemSelector);
                if (el) {
                    await new Promise((resolve) => {
                        const cleanup = () => {
                            el.removeEventListener("dragstart", onDragStart);
                            el.removeEventListener("mousedown", onMouseDown);
                            el.removeEventListener("touchstart", onTouchStart);
                            el.removeEventListener("click", onClick);
                        };
                        const onDragStart = () => {
                            cleanup();
                            resolve();
                        };
                        const onMouseDown = () => {
                            cleanup();
                            resolve();
                        }; // falls Drag per Mousedown beginnt
                        const onTouchStart = () => {
                            cleanup();
                            resolve();
                        }; // mobile
                        const onClick = () => {
                            cleanup();
                            resolve();
                        };
                        el.addEventListener("dragstart", onDragStart, { once: true });
                        el.addEventListener("mousedown", onMouseDown, { once: true });
                        el.addEventListener("touchstart", onTouchStart, { once: true });
                        el.addEventListener("click", onClick, { once: true });
                    });
                }
            },
            nextStep: "drop-component-placeholder",
        },
        "drop-component-placeholder": {
            title: isMobile ? "Place Here!" : "Drop Here!",
            description: isMobile
                ? "Tap this placeholder to place the component!"
                : "Drop the component onto this placeholder!",
            focusElement: ".tour-placeholder-dropzone",
            bubblePosition: "left",
            extendFocus: 70,
            skipIf: () => !hasPlaceholderTemplate,
            waitForUserInput: async () => {
                const selector = ".tour-placeholder-dropzone";
                if (isMobile) {
                    await waitForElement(selector);
                    const el = document.querySelector(selector);
                    if (el) {
                        await new Promise((resolve) => {
                            el.addEventListener("click", () => resolve(), { once: true });
                        });
                    }
                }
                await waitForElementToDisappear(selector);
                await delay(400);
            },
            nextStep: "insert-component-placeholder",
        },
        "insert-component-placeholder": {
            title: "Insert Component",
            description: `Let's add a component to the ${config.placeholderTemplateName}.`,
            focusElement: '#insert-component-button, [data-testid="insert-component-button"]',
            bubblePosition: "bottom-right",
            skipIf: () => !hasPlaceholderTemplate,
            waitForUserInput: async () => {
                await waitForElement(".tour-component-palette");
            },
            nextStep: "drag-component",
        },
        "drag-component": {
            title: isMobile
                ? `Select ${config.firstComponentTemplateName}`
                : "Drag & Drop Component",
            description: isMobile
                ? `Tap the ${config.firstComponentTemplateName} component`
                : `Drag and drop a ${config.firstComponentTemplateName} component to your page.`,
            focusElement: `#insert-component-${config.firstComponentTemplateId}`,
            bubblePosition: "right",
            prepareAction: async () => {
                await ensureMobilePanelSize();
                await waitForElement(".tour-component-palette");
                const itemSelector = `#insert-component-${config.firstComponentTemplateId}, [data-testid="insert-component-${config.firstComponentTemplateId}"]`;
                await waitForElement(itemSelector);
                await scrollToElement(itemSelector);
            },
            waitForUserInput: async () => {
                //await waitForElement(".tour-placeholder-dropzone");
                await waitForElement(".tour-component-palette");
                const itemSelector = `#insert-component-${config.firstComponentTemplateId}, [data-testid="insert-component-${config.firstComponentTemplateId}"]`;
                await waitForElement(itemSelector);
                const el = document.querySelector(itemSelector);
                if (el) {
                    await new Promise((resolve) => {
                        const cleanup = () => {
                            el.removeEventListener("dragstart", onDragStart);
                            el.removeEventListener("mousedown", onMouseDown);
                            el.removeEventListener("touchstart", onTouchStart);
                            el.removeEventListener("click", onClick);
                        };
                        const onDragStart = () => {
                            cleanup();
                            resolve();
                        };
                        const onMouseDown = () => {
                            cleanup();
                            resolve();
                        }; // falls Drag per Mousedown beginnt
                        const onTouchStart = () => {
                            cleanup();
                            resolve();
                        }; // mobile
                        const onClick = () => {
                            cleanup();
                            resolve();
                        };
                        el.addEventListener("dragstart", onDragStart, { once: true });
                        el.addEventListener("mousedown", onMouseDown, { once: true });
                        el.addEventListener("touchstart", onTouchStart, { once: true });
                        el.addEventListener("click", onClick, { once: true });
                    });
                }
            },
            nextStep: "drop-component",
        },
        "drop-component": {
            title: isMobile ? "Place Here!" : "Drop Here!",
            description: isMobile
                ? "Tap this placeholder to place the component!"
                : "Drop the component onto this placeholder!",
            focusElement: ".tour-placeholder-dropzone",
            bubblePosition: "left",
            extendFocus: 70,
            waitForUserInput: async () => {
                const selector = ".tour-placeholder-dropzone";
                if (isMobile) {
                    await waitForElement(selector);
                    const el = document.querySelector(selector);
                    if (el) {
                        await new Promise((resolve) => {
                            el.addEventListener("click", () => resolve(), { once: true });
                        });
                    }
                }
                await waitForElementToDisappear(".tour-placeholder-dropzone");
                await delay(400);
                if (!document.querySelector(".tour-component-palette")) {
                    return "enter-title";
                }
                return "drag-component";
            },
            nextStep: "enter-title",
        },
        "enter-title": {
            title: "Fill in Content",
            description: `Excellent! Now lets fill in the fields. First enter a ${config.firstComponentTextFieldName}`,
            focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
            waitForUserInput: async () => {
                await delay(5000);
                await waitForInput(`[data-field-id='${config.firstComponentTextFieldId}'] input`, 5);
            },
            nextStep: "see-content-update",
        },
        "see-content-update": {
            title: "Live Updates",
            description: "See how the content is automatically updating on your page?",
            focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
            pointToElement: `iframe:[data-fieldid='${config.firstComponentTextFieldId}']`,
            bubblePosition: "bottom",
            flipArrow: true,
            waitForUserInput: async () => {
                await delay(5000);
                await waitForInput(`[data-field-id='${config.firstComponentTextFieldId}'] input`, 5);
            },
            nextStep: "edit-content-inline",
        },
        "edit-content-inline": {
            title: "Inline Editing",
            description: `You can also directly edit the content on the page. Click on the [${config.firstComponentRichTextFieldName}] placeholder here and start typing!`,
            focusElement: `iframe:[data-fieldid='${config.firstComponentRichTextFieldId}']`,
            bubblePosition: "bottom",
            flipArrow: true,
            waitForUserInput: async () => {
                await delay(5000);
                await waitForInput(`[data-field-id='${config.firstComponentRichTextFieldId}'] [contenteditable]`, 5);
            },
            nextStep: "ai-intro",
        },
        "ai-intro": {
            title: "AI-Powered Editing",
            description: "But hey, this is an AI editor, so why not let the AI do some of the work for you?",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4" }), " Great, show me!"] })),
                    onClick: () => nextStep("open-agents-panel"),
                },
            ],
        },
        "open-agents-panel": {
            title: "Open AI Agents",
            description: isMobile
                ? "Tap the Agents icon to start an AI chat."
                : "Open the Agents panel to start an AI chat.",
            focusElement: "[data-testid='agents-panel-button']",
            bubblePosition: "left",
            skipIf: () => isAgentsPanelOpen(),
            // Example: Skip this step if AI services are not configured
            // skipIf: (config: EditorConfiguration) => !config.services?.aiService,
            waitForUserInput: async () => {
                const btn = document.querySelector("[data-testid='agents-panel-button']");
                if (btn) {
                    await new Promise((resolve) => {
                        btn.addEventListener("click", () => resolve(), { once: true });
                    });
                }
                await delay(300);
                // Wait for either add-agent-button or agent-profile-card to appear
                return new Promise((resolve) => {
                    const checkElements = () => {
                        if (document.querySelector("[data-testid='agent-profile-card']")) {
                            resolve("choose-agent");
                        }
                        else if (document.querySelector("[data-testid='add-agent-button']")) {
                            resolve("ensure-new-agent-tab");
                        }
                        else {
                            requestAnimationFrame(checkElements);
                        }
                    };
                    checkElements();
                });
            },
            nextStep: "ensure-new-agent-tab",
        },
        "ensure-new-agent-tab": {
            title: "Start New Agent",
            description: isMobile
                ? "Tap the + button to start a new agent chat."
                : "Click on the + button to start a new agent chat.",
            focusElement: "[data-testid='add-agent-button']",
            bubblePosition: "left",
            // Skip this step if profile cards are already visible (New Agent tab is already shown)
            skipIf: () => isElementVisible("[data-testid='agent-profile-card']"),
            prepareAction: async () => {
                await scrollToElement("[data-testid='add-agent-button']");
            },
            waitForUserInput: async () => {
                const btn = document.querySelector("[data-testid='add-agent-button']");
                if (btn) {
                    await new Promise((resolve) => {
                        btn.addEventListener("click", () => resolve(), { once: true });
                    });
                }
                await delay(300);
                await waitForElement("[data-testid='agent-profile-card']");
            },
            nextStep: "choose-agent",
        },
        "choose-agent": {
            title: "Choose an AI Agent",
            description: isMobile
                ? "Tap an AI agent to assist you with your tasks."
                : "Choose an AI agent to assist you with your tasks.",
            focusElement: "#agent-profile-card, [data-testid='agent-profile-card']",
            bubblePosition: "left",
            prepareAction: async () => {
                await scrollToElement("#agent-profile-card, [data-testid='agent-profile-card']");
            },
            waitForUserInput: async () => {
                const btn = document.querySelector("#agent-profile-card, [data-testid='agent-profile-card']");
                if (btn) {
                    await new Promise((resolve) => {
                        btn.addEventListener("click", () => resolve(), { once: true });
                    });
                }
                await delay(500);
                await waitForElement("[data-testid='agent-terminal-prompt']");
            },
            nextStep: "start-agent-chat",
        },
        "start-agent-chat": {
            title: "Start a chat",
            description: isMobile
                ? "Type a prompt for the agent - Let AI create your whole webpage or just parts and tap Enter."
                : "Type a prompt for the agent - Let AI create your whole webpage or just parts and press Enter.",
            focusElement: "[data-testid='agent-terminal-prompt']",
            bubblePosition: "top-left",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(Check, { className: "inline h-4 w-4" }), " Got it"] })),
                    onClick: () => nextStep(isMobile ? "congratulations" : "choose-depth"),
                    className: "button button-primary mt-2",
                },
            ],
            waitForUserInput: async () => {
                await waitForInput("[data-testid='agent-terminal-prompt'] textarea", 5);
            },
            nextStep: isMobile ? "congratulations" : "choose-depth",
        },
        "choose-depth": {
            title: "What would you like to do next?",
            description: "You now know the basics. Would you like to start creating on your own or explore more editor features?",
            buttons: [
                {
                    label: "I want to try it myself",
                    onClick: () => nextStep("basic-tour-done"),
                    className: "button button-secondary mt-2",
                },
                {
                    label: "Dive deeper",
                    onClick: () => nextStep("deep-dive-top-bar"),
                    className: "button button-primary mt-2",
                },
            ],
        },
        "basic-tour-done": {
            title: "Congratulations!",
            description: "You have completed the basic tour and are now ready to start creating.",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(Check, { className: "inline h-4 w-4" }), " Finish Tour"] })),
                    onClick: () => stopTour(),
                    className: "button button-primary mt-2",
                },
            ],
        },
        "deep-dive-top-bar": {
            title: "Top Bar",
            description: "This is the top bar where you can find important editor actions and settings.",
            focusElement: "[data-testid='genericToolbar']",
            bubblePosition: "bottom",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4" }), " Next"] })),
                    onClick: () => nextStep("deep-dive-preview-edit-suggestions"),
                    className: "button button-primary mt-2",
                },
            ],
        },
        "deep-dive-preview-edit-suggestions": {
            title: "Preview & Suggestions",
            description: "Use these options to toggle preview and view suggestions while you work.",
            focusElement: "[data-testid='preview-mode-button']",
            bubblePosition: "right",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4" }), " Next"] })),
                    onClick: () => nextStep("deep-dive-device-switch"),
                    className: "button button-primary mt-2",
                },
            ],
        },
        "deep-dive-device-switch": {
            title: "Switch Device Views",
            description: "Here you can switch between desktop, mobile, and form views to check your page in different editing modes.",
            focusElement: "[data-testid='viewport-mode-switcher-button']",
            bubblePosition: "bottom",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4" }), " Next"] })),
                    onClick: () => nextStep("deep-dive-navigator"),
                    className: "button button-primary mt-2",
                },
            ],
        },
        "deep-dive-navigator": {
            title: "Component Navigation",
            description: "From here you can open the component navigator to navigate through the components on your page easily.",
            focusElement: "[data-testid='component-navigator-button']",
            bubblePosition: "left",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(ArrowRight, { className: "inline h-4 w-4" }), " Next"] })),
                    onClick: () => nextStep("deep-dive-left-panel"),
                    className: "button button-primary mt-2",
                },
            ],
        },
        "deep-dive-left-panel": {
            title: "Content Tree & Translations",
            description: "Click this button to access additional features like viewing the content tree, execute translations, and more.",
            focusElement: "[data-testid='more-sidebars-button']",
            bubblePosition: "right",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(Check, { className: "inline h-4 w-4" }), " Finish Tour"] })),
                    onClick: () => nextStep("congratulations"),
                    className: "button button-primary mt-2",
                },
            ],
        },
        congratulations: {
            title: "Congratulations!",
            description: "You have completed the tour and are now a Parhelia Pro!",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(Check, { className: "inline h-4 w-4" }), " Finish Tour"] })),
                    onClick: () => stopTour(),
                    className: "button button-primary mt-2",
                },
            ],
        },
        error: {
            title: "Oh no...",
            description: "Something went wrong.",
            buttons: [
                {
                    label: (_jsxs(_Fragment, { children: [_jsx(Check, { className: "inline h-4 w-4" }), " Close"] })),
                    onClick: () => stopTour(),
                },
            ],
        },
    };
    return tourSteps;
}
//# sourceMappingURL=default-tour.js.map