import React, { useState } from "react";
import { C3Navigation } from "../c3-navigation";
import { createAppBarProps, createAppProps, createNavBarBarProps, createUserSideBarProps, } from "./story-helpers";
import { SwitcherDivider, Toggle } from "@carbon/react";
export const DefaultTemplate = (args) => (React.createElement(React.Fragment, null,
    React.createElement(C3Navigation, { ...args }),
    React.createElement("div", { id: "main-content" })));
export const SuperUserToggle = ({ isActive, onChange }) => {
    return (React.createElement(React.Fragment, null,
        React.createElement(SwitcherDivider, null),
        React.createElement("div", { style: { padding: ".5rem 1rem" } },
            React.createElement(Toggle, { size: "sm", id: "toggle-super-admin-mode", defaultToggled: isActive, onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive), labelText: "Enter super-admin mode", "aria-label": "Enter super-admin mode" }))));
};
export const NavbarWithCustomSection = () => {
    const [isSuperAdminModeActive, setIsSuperAdminModeActive] = useState(true);
    return (React.createElement(React.Fragment, null,
        React.createElement(C3Navigation, { app: createAppProps(), appBar: createAppBarProps(), navbar: {
                ...createNavBarBarProps(),
                tags: isSuperAdminModeActive
                    ? [
                        {
                            key: "superUserMode",
                            label: "Super-user mode",
                            color: "high-contrast",
                        },
                    ]
                    : undefined,
            }, userSideBar: {
                ...createUserSideBarProps({ isOpen: false }),
                customElements: {
                    customSection: (React.createElement(SuperUserToggle, { isActive: isSuperAdminModeActive, onChange: setIsSuperAdminModeActive })),
                },
            } }),
        React.createElement("div", { id: "main-content" })));
};
