import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import styled, { css } from 'styled-components';
import { Logo } from '../../icons/branding';
import { spacing } from '../../spacing';
import { fontSize, navbarHeight, navbarItemWidth } from '../../style/theme';
import { getThemePropSelector } from '../../utils';
import { Button } from '../button/Button.component';
import { Dropdown } from '../dropdown/Dropdown.component';
import { Icon } from '../icon/Icon.component';
const NavbarContainer = styled.div `
  height: ${navbarHeight};
  display: flex;
  justify-content: space-between;
  ${css `
    background-color: ${getThemePropSelector('backgroundLevel1')};
    color: ${getThemePropSelector('textPrimary')};
    .fas,
    .sc-trigger-text {
      color: ${getThemePropSelector('textPrimary')};
    }
    border-bottom: ${spacing.r1} solid
      ${getThemePropSelector('backgroundLevel1')};
  `};
`;
const NavbarMenu = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
`;
const NavbarTabs = styled.div `
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    height: 100%;
    padding: 0 ${spacing.r16};
    border-bottom: ${spacing.r2} solid transparent;
    border-top: ${spacing.r2} solid transparent;
    ${(props) => {
    const { selectedActive } = props.theme;
    return css `
        color: ${getThemePropSelector('textPrimary')};
        &:hover {
          background-color: ${getThemePropSelector('highlight')};
        }
        &.selected {
          color: ${getThemePropSelector('textPrimary')};
          font-weight: bold;
          border-bottom-color: ${selectedActive};
        }
      `;
}};
  }
`;
const TabItem = styled.div `
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 ${spacing.r16};
  ${(props) => {
    const { textPrimary } = props.theme;
    return css `
      color: ${textPrimary};
      &:hover {
        border-bottom: ${spacing.r2} solid;
        border-top: ${spacing.r2} solid;
        cursor: pointer;
      }
    `;
}};
  ${(props) => props.selected &&
    css `
      border-top: ${spacing.r2} solid;
      border-bottom: ${spacing.r2} solid;
    `};
`;
const NavbarMenuItem = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
  .sc-dropdown {
    .trigger {
      background-color: ${getThemePropSelector('backgroundLevel1')};
      &:hover {
        background-color: ${getThemePropSelector('highlight')};
      }
      height: ${navbarHeight};
      font-size: ${fontSize.base};
    }
    .menu-item {
      max-height: unset;
    }
  }

  .sc-button {
    margin: 0;
    border-radius: 0;
    height: ${navbarHeight};
    font-size: ${fontSize.base};
    background-color: ${getThemePropSelector('backgroundLevel1')};
    &:hover {
      background-color: ${getThemePropSelector('highlight')};
    }
    width: ${navbarItemWidth};
  }
`;
const LogoContainer = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 ${spacing.r16};
  svg {
    width: 7.143rem;
    height: 2.143rem;
  }
`;
const getActionRenderer = ({ type, items = null, ...rest }, index) => {
    if (type === 'dropdown') {
        return items ? (_jsx(Dropdown, { size: "larger", variant: "backgroundLevel1", items: items, caret: false, ...rest }, `navbar_right_action_${index}`)) : null;
    }
    else if (type === 'button') {
        return (_jsx(Button, { size: "larger", variant: "backgroundLevel1", ...rest }, `navbar_right_action_${index}`));
    }
    else if (type === 'custom') {
        return _jsx(rest.render, {}, `navbar_right_action_${index}`);
    }
    return null;
};
function NavBar({ onToggleClick, logo, tabs = [], rightActions = [], ...rest }) {
    return (_jsxs(NavbarContainer, { className: "sc-navbar", ...rest, children: [_jsxs(NavbarMenu, { children: [onToggleClick && (_jsx(NavbarMenuItem, { onClick: onToggleClick, children: _jsx(Button, { size: "larger", variant: "backgroundLevel1", icon: _jsx(Icon, { name: "Lat-menu" }), title: "Main Menu" }) })), _jsx(NavbarMenuItem, { children: _jsx(LogoContainer, { className: "sc-logo", children: logo ? logo : _jsx(Logo, {}) }) })] }), tabs.length ? (_jsx(NavbarTabs, { children: tabs.map(({ link, title, selected, onClick }, index) => {
                    return link ? (React.cloneElement(link, {
                        className: selected ? 'selected' : '',
                        'aria-selected': selected,
                        role: 'tab',
                        key: `navbar_tab_item_${index}`,
                    })) : (_jsx(TabItem, { onClick: onClick, role: "tab", selected: !!selected, "aria-selected": selected, children: _jsx("span", { children: title }) }, `navbar_tab_item_${index}`));
                }) })) : null, rightActions.length ? (_jsx(NavbarMenu, { children: _jsx(NavbarMenuItem, { children: rightActions.map((action, index) => 
                    //@ts-ignore too costly to type this one now
                    getActionRenderer(action, index)) }) })) : null] }));
}
export const Navbar = NavBar;
