import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, Link, } from "@carbon/react";
import React from "react";
import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
import C3OrgSidebar from "./c3-org-sidebar/c3-org-sidebar";
import C3UserSidebar from "./c3-navigation-sidebar/c3-user-sidebar";
import { useMediaQuery } from "./helpers";
import { C3NavigationAppBar } from "./c3-navigation-appbar/c3-navigation-appbar";
import styled from "styled-components";
import C3ActionButtons from "./c3-navigation-actions/c3-action-buttons";
import { CamundaLogo } from "../../assets/c3-icons";
import { InfoButton } from "./c3-info-button";
import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider";
import { C3HelpCenter } from "../c3-help-center/c3-help-center";
import { C3ClusterTag } from "../c3-cluster-tag/c3-cluster-tag";
import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
import { HelpCenterHint } from "../c3-help-center/help-center-hint";
import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
import { Time, Warning } from "@carbon/react/icons";
/**
 * UI SHELL
 * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
 */
const BREAKPOINT_LG_WIDTH = "66rem"; // This is Carbon's breakpoint (lg) width https://github.com/carbon-design-system/carbon/blob/main/packages/layout/src/index.js#L56
const Stack = styled(CarbonStack) `
	align-items: center;
`;
const StyledToggletipContent = styled(ToggletipContent) `
	.cds--link:visited {
		color: var(--cds-link-text-color);
	}

	.cds--link:visited:hover {
		color: var(--cds-link-hover-text-color);
	}
`;
const ClusterTagWrapper = styled.div `
	.cds--tag {
		height: 1.5rem;
		margin-top: 0.75rem;
		padding: 0 1rem;
	}
`;
const NON_PRODUCTION_TERMS_LINK = "https://legal.camunda.com/#self-managed-non-production-terms";
const SALES_CONTACT_LINK = "https://camunda.com/contact/";
export const SECOND = 1000;
export const MINUTE = SECOND * 60;
export const HOUR = MINUTE * 60;
export const DAY = HOUR * 24;
const LICENSE_EXPIRY = DAY * 30;
export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
    const { openHelpCenter } = useC3HelpCenter();
    const { currentClusterUuid } = useC3UserConfiguration();
    const { activeOrg } = useC3Profile();
    const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
    const appBarElementsLength = appBar.elements?.length ?? 0;
    const displayAppBar = appBarElementsLength > 0 ||
        appBar.appTeaserRouteProps ||
        (!isLargeScreen && navbar.elements.length > 0);
    const orgName = activeOrg?.name || navbar.orgName;
    let expiresAt;
    if (navbar.licenseTag?.expiresAt !== undefined) {
        if (typeof navbar.licenseTag?.expiresAt === "string") {
            expiresAt = Date.parse(navbar.licenseTag?.expiresAt);
        }
        if (typeof navbar.licenseTag?.expiresAt === "number") {
            expiresAt = navbar.licenseTag?.expiresAt;
        }
    }
    const tags = [
        ...(navbar.tags || []),
        ...(navbar.licenseTag?.show
            ? [
                {
                    key: "license-tag",
                    label: navbar.licenseTag.isProductionLicense
                        ? "Production license"
                        : "Non-production license",
                    color: "gray",
                    tooltip: navbar.licenseTag.isProductionLicense
                        ? undefined
                        : {
                            content: (React.createElement("p", null,
                                "Non-production license. For production usage details, visit our",
                                " ",
                                React.createElement(Link, { href: NON_PRODUCTION_TERMS_LINK, target: "_blank", style: { display: "inline" } }, "terms & conditions page"),
                                " ",
                                "or",
                                " ",
                                React.createElement(Link, { href: SALES_CONTACT_LINK, target: "_blank", style: { display: "inline" } }, "contact our sales team"),
                                ".")),
                            buttonLabel: "Learn more",
                        },
                },
            ]
            : []),
        ...(navbar.licenseTag?.show &&
            navbar.licenseTag?.isCommercial === false &&
            (expiresAt === undefined || expiresAt - LICENSE_EXPIRY >= Date.now())
            ? [
                {
                    key: "non-commercial-license-tag",
                    label: `Non-commercial license`,
                    color: "gray",
                },
            ]
            : []),
        ...(navbar.licenseTag?.show &&
            expiresAt &&
            navbar.licenseTag?.isCommercial === false &&
            expiresAt - LICENSE_EXPIRY < Date.now() &&
            expiresAt > Date.now()
            ? [
                {
                    key: "non-commercial-license-tag-about-to-expire",
                    label: `Non-commercial license - ${Math.floor((expiresAt - Date.now()) / DAY)} ${Math.floor((expiresAt - Date.now()) / DAY) > 1 ? "days" : "day"} left`,
                    color: "blue",
                    renderIcon: Time,
                    tooltip: {
                        content: (React.createElement("p", null, "Please renew and provide new license keys to continue production use of Camunda.")),
                        buttonLabel: "Learn more",
                    },
                },
            ]
            : []),
        ...(navbar.licenseTag?.show &&
            navbar.licenseTag?.expiresAt &&
            navbar.licenseTag?.isCommercial === false &&
            expiresAt < Date.now()
            ? [
                {
                    key: "non-commercial-license-tag-is-expired",
                    label: `Non-commercial license - expired`,
                    color: "red",
                    renderIcon: Warning,
                    tooltip: {
                        content: (React.createElement("p", null, "To continue using all features, please renew your license.")),
                        buttonLabel: "Learn more",
                    },
                },
            ]
            : []),
    ];
    if (app.prefix)
        console.warn("The `prefix` prop is deprecated and will be removed in a future release. It has been replaced with a Camunda icon.");
    return (React.createElement(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen },
        React.createElement(HeaderContainer, { render: () => {
                return (React.createElement(Header, { "aria-label": app.ariaLabel },
                    React.createElement(SkipToContent, null),
                    displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
                    React.createElement(HeaderName, { as: forwardRef, prefix: "", ...app.routeProps },
                        React.createElement(Stack, { gap: 3, orientation: "horizontal" },
                            React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
                            React.createElement("span", null, app.name))),
                    React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps },
                        React.createElement("span", null, element.label))))),
                    React.createElement(HeaderGlobalBar, null,
                        React.createElement("div", { style: {
                                display: "grid",
                                gridAutoFlow: "column",
                                gap: ".5rem",
                                paddingRight: ".5rem",
                            } },
                            tags &&
                                tags.length > 0 &&
                                tags.map((tag) => {
                                    if (tag?.tooltip !== undefined) {
                                        const { content, buttonLabel } = tag.tooltip;
                                        return (React.createElement("div", { key: tag.key, style: {
                                                height: "1.5rem",
                                                marginTop: "0.75rem",
                                            } },
                                            React.createElement(Toggletip, null,
                                                React.createElement(ToggletipButton, { label: buttonLabel },
                                                    React.createElement(Tag, { type: tag.color, renderIcon: tag.renderIcon, style: {
                                                            margin: "0",
                                                            cursor: "pointer",
                                                            overflow: "hidden",
                                                            whiteSpace: "nowrap",
                                                            textOverflow: "ellipsis",
                                                        } }, tag.label)),
                                                React.createElement(StyledToggletipContent, null, content))));
                                    }
                                    return (React.createElement(Tag, { key: tag.key, renderIcon: tag.renderIcon, style: {
                                            height: "1.5rem",
                                            marginTop: "0.75rem",
                                            overflow: "hidden",
                                            whiteSpace: "nowrap",
                                            textOverflow: "ellipsis",
                                        }, type: tag.color }, tag.label));
                                }),
                            (clusterUuid || currentClusterUuid) && (React.createElement(ClusterTagWrapper, null,
                                React.createElement(C3ClusterTag, { clusterUuid: clusterUuid || currentClusterUuid || "", conditionalRendering: options?.conditionalTagRendering }))),
                            orgName && (React.createElement("div", { className: "bodyText", style: {
                                    fontSize: "14px",
                                    lineHeight: "3rem",
                                    textOverflow: "ellipsis",
                                    whiteSpace: "nowrap",
                                    overflow: "hidden",
                                    maxWidth: "150px",
                                } }, orgName))),
                        actionButtons && React.createElement(C3ActionButtons, { elements: actionButtons }),
                        notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
                                ...notificationSideBar,
                                type: "notifications",
                            } })),
                        orgSideBar && (React.createElement(C3OrgSidebar, { sideBar: {
                                ...orgSideBar,
                                type: "org",
                            } })),
                        infoButton || helpCenter ? (React.createElement(HelpCenterHint, null,
                            React.createElement(InfoButton, { onClick: infoButton ? infoButton.onClick : () => openHelpCenter() }))) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
                        userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
                                ...userSideBar,
                                type: "user",
                            } })))));
            } }),
        helpCenter && React.createElement(C3HelpCenter, { ...helpCenter })));
};
