import React from "react";
import C3NavigationSideBar from "./c3-navigation-sidebar";
import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggle, } from "@carbon/react";
import { UserAvatar } from "@carbon/react/icons";
import styled from "styled-components";
import { useUserSidebarState } from "./c3-sidebar-state-provider";
import { useC3Profile, } from "../../c3-user-configuration/c3-profile-provider/c3-profile-provider";
import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-configuration-provider";
const VersionWrapper = styled.div `
	align-self: end;
	padding: 0.5rem 1rem;
`;
const Version = styled.p `
	color: var(--cds-text-primary);
	font-size: var(--cds-label-02-font-size);
	font-weight: var(--cds-label-02-font-weight);
	line-height: var(--cds-label-02-line-height);
	letter-spacing: var(--cds-label-02-letter-spacing);
`;
const Copyright = styled.p `
	color: var(--cds-text-secondary);
	font-size: var(--cds-label-01-font-size);
	font-weight: var(--cds-label-01-font-weight);
	line-height: var(--cds-label-01-line-height);
	letter-spacing: var(--cds-label-01-letter-spacing);
`;
const C3UserSidebar = ({ sideBar }) => {
    const { customElements, version, ...sideBarProps } = sideBar;
    const profile = customElements?.profile;
    const themeSelector = customElements?.themeSelector;
    const stageToggle = customElements?.stageToggle;
    const customSection = customElements?.customSection;
    const { handleTheme } = useC3UserConfiguration();
    const { theme, onThemeChange } = useC3Profile();
    const { isOpen } = useUserSidebarState();
    const itemTabIndex = isOpen ? undefined : -1;
    return (React.createElement(C3NavigationSideBar, { sideBar: {
            ...sideBarProps,
            ariaLabel: sideBarProps.ariaLabel || "User Sidebar",
        }, icon: React.createElement(UserAvatar, { size: 20 }), version: version && (React.createElement(VersionWrapper, null,
            React.createElement(Version, null,
                "Version ",
                version),
            React.createElement(Copyright, null,
                "\u00A9 Camunda Services GmbH ",
                new Date().getFullYear()),
            React.createElement(Copyright, null, "All right reserved."))), bottomChildren: customSection },
        profile && (React.createElement("div", { style: {
                padding: "1rem",
                paddingTop: "1.5rem",
                paddingBottom: ".5rem",
            } },
            React.createElement(Stack, { gap: 2 },
                React.createElement(FormLabel, null, profile.label),
                React.createElement(Stack, null,
                    React.createElement("div", { className: "textPrimary", style: { fontSize: "14px" } }, profile.user.name),
                    React.createElement("div", { className: "textPrimary", style: { fontSize: "12px" } }, profile.user.email))))),
        (themeSelector || handleTheme) && (React.createElement(React.Fragment, null,
            React.createElement(SwitcherDivider, null),
            React.createElement("div", { style: {
                    padding: ".5rem 1rem",
                } },
                React.createElement(RadioButtonGroup, { name: "theme-radio-group", legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
                        handleTheme
                            ? onThemeChange(newValue)
                            : themeSelector?.onChange(newValue);
                    }, valueSelected: handleTheme ? theme : themeSelector?.currentTheme },
                    React.createElement(RadioButton, { id: "light", labelText: "Light", value: "light", tabIndex: itemTabIndex }),
                    React.createElement(RadioButton, { id: "system", labelText: "System", value: "system", tabIndex: itemTabIndex }),
                    React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark", tabIndex: itemTabIndex }))))),
        stageToggle && (React.createElement(React.Fragment, null,
            React.createElement(SwitcherDivider, null),
            React.createElement("div", { style: { padding: ".5rem 1rem" } },
                React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex, "aria-label": "Simulate Production Features" }))))));
};
export default C3UserSidebar;
