import styled, { css } from 'styled-components';
import { darken, getContrast, lighten, transparentize } from 'polished';
import { useContext } from 'react';
import { Count } from '../Badges';
import { StyledAvatar } from '../Avatar';
import { StyledIcon } from '../Icon';
import { StyledImage } from '../Image/Image';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize, calculateForegroundColor, calculateBackgroundAndContrastColor, readableColor } from '../../styles';
import { StyledMenuItem } from '../Menu/Menu.styles';
import { useDirection } from '../../hooks';
import { StyledBareButton } from '../Button/BareButton';
import Button from '../Button';
import { StyledTooltip } from '../Tooltip';
import { StyledProgressBackdrop } from '../Progress';
import Icon from '../Icon/Icon';
import { StyledText } from '../Text';
import { resizeDrawerMaxWidth } from '../../styles/constants';
import AppShellContext from './AppShellContext';
import { navContrastColors, pxToRem } from './style-utils';
export const navWidth = '4rem';
export const navOpenWidth = '18.75rem';
export const headerHeight = '3rem';
const iconWidth = '1.125rem';
export const StyledAppInfo = styled.a(({ theme }) => {
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    const { hoverBg, foreground } = navContrastColors(theme);
    return css `
    padding: ${theme.base.spacing} calc(${navWidth} / 4);
    grid-template-columns: calc(${navWidth} / 2) auto;
    column-gap: calc(${navWidth} / 4);
    vertical-align: middle;

    &:hover,
    button&:hover {
      background-color: ${hoverBg};
      text-decoration: none;
    }

    &:focus:not([disabled]) {
      outline: none;
      box-shadow: ${theme.base.shadow['focus-inset']};
    }

    ${StyledImage} {
      display: inline-block;
      width: calc(${navWidth} / 2);
      margin-inline-end: calc(${theme.base.spacing} * 2);
      vertical-align: middle;
    }

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    span:last-of-type {
      font-size: ${fontSize.xs};
      color: ${foreground};
    }

    span:first-of-type {
      font-size: ${fontSize.s};
      color: ${foreground};
      margin-inline-end: calc(${theme.base.spacing});
      vertical-align: middle;
    }
  `;
});
StyledAppInfo.defaultProps = defaultThemeProp;
export const StyledScrollWrap = styled.div(({ theme }) => {
    return css `
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    @media (height <= ${theme.base.breakpoints.sm}) {
      overflow: visible;
      flex-shrink: 0;
    }
  `;
});
StyledScrollWrap.defaultProps = defaultThemeProp;
export const StyledCountIcon = styled(Count)(({ theme: { base: { spacing }, components: { 'app-shell': { nav: { detached } } } } }) => {
    const insetInlineStartOffsetMultiplier = detached ? 3 : 4;
    return css `
    position: absolute;
    inset-inline-start: calc(${insetInlineStartOffsetMultiplier} * ${spacing});
    top: calc(0.5 * ${spacing});
    padding: 0 calc(0.5 * ${spacing});
  `;
});
StyledCountIcon.defaultProps = defaultThemeProp;
export const StyledSingleSelectIconBox = styled.span(({ theme }) => {
    return css `
    flex-shrink: 0;
    height: ${theme.base['hit-area']['mouse-min']};
    width: ${theme.base['hit-area']['mouse-min']};
    margin-inline-start: calc(2 * ${theme.base.spacing});
  `;
});
StyledSingleSelectIconBox.defaultProps = defaultThemeProp;
export const StyledNavListItemExpandCollapse = styled(Icon) ``;
export const StyledUtilIconCount = styled.span `
  flex-shrink: 0;
`;
export const StyledNavItemIconBox = styled.span(({ theme }) => {
    return css `
    flex-shrink: 0;
    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {
      margin-inline: calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2);
    }

    ${StyledAvatar} {
      margin-inline: calc(
        (${navWidth} - ${theme.base['hit-area']['mouse-min']} - 2 * var(--nav-padding)) / 2
      );
      margin-block: calc(0.5 * ${theme.base.spacing});
      font-weight: ${theme.base['font-weight'].normal};
    }
  `;
});
StyledNavItemIconBox.defaultProps = defaultThemeProp;
export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
    const { navOpen } = useContext(AppShellContext);
    const navBg = theme.components['app-shell'].nav.background;
    const navFgColor = theme.components['app-shell'].nav['foreground-color'];
    const foregroundColor = calculateForegroundColor(navBg, navFgColor);
    return css `
      position: fixed;
      z-index: calc(${theme.base['z-index'].backdrop} - 2);
      background: ${navBg};
      color: ${foregroundColor};
      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});
      width: ${navOpen ? navOpenWidth : navWidth};
      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});
      overflow: hidden;
      white-space: nowrap;
      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
      padding-block-end: ${theme.base.spacing};
      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};
      border-color: ${theme.components['app-shell'].nav['border-color']};
      ${!showEnv &&
        css `
        padding-block-start: ${theme.base.spacing};
      `}
      @media (pointer: coarse) {
        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
      }

      @media (height <= ${theme.base.breakpoints.sm}) {
        overflow: auto;
      }

      /* App navigation can be focused with shortcut */
      :focus-visible {
        box-shadow: ${theme.base.shadow['focus-inset']};
      }

      ${theme.base['custom-scrollbar'] &&
        css `
        * {
          scrollbar-width: thin;
        }
      `}
    `;
});
StyledAppNav.defaultProps = defaultThemeProp;
export const StyledCaseClose = styled.button ``;
export const StyledNavListItemVisualContainer = styled.div(({ theme: { base: { spacing }, components: { 'app-shell': { nav: { detached } } } }, isCurrent, navOpen }) => {
    return css `
      max-width: ${navWidth};
      padding-block: calc(var(--nav-padding) / 8);
      padding-inline: var(--nav-padding);

      ${!navOpen &&
        detached &&
        css `
        padding-inline: 0;
        width: calc(${navWidth} - 2 * var(--nav-padding));
        margin: auto;
      `}

      & > ${StyledText} {
        padding-inline: ${isCurrent
        ? `${spacing} calc(0.5 * ${spacing})`
        : `calc(0.5 * ${spacing})`};

        ${!navOpen &&
        detached &&
        css `
          padding-inline: 0;
        `}
      }
    `;
});
StyledNavListItemVisualContainer.defaultProps = defaultThemeProp;
export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, singleSelect }) => {
    const { base: { 'font-weight': { 'semi-bold': semiBold } }, components: { 'app-shell': { nav: { detached } } } } = theme;
    const { navOpen } = useContext(AppShellContext);
    const { foreground } = navContrastColors(theme);
    const { rtl } = useDirection();
    return css `
    display: block;
    position: relative;

    ${StyledIcon} {
      font-size: 1.25rem;
    }

    ${StyledCaseClose} {
      display: flex;
      position: absolute;
      opacity: 0;
      left: ${navOpen ? 'auto' : '100%'};
      top: 50%;
      bottom: 50%;
      margin: auto 0;
      color: ${foreground};
      transition-property: transform, opacity;
      transition-duration: ${theme.base.animation.speed};
      transition-timing-function: ${theme.base.animation.timing.ease};
      ${navOpen &&
        css `
        inset-inline-end: 1rem;

        &:hover,
        &:focus {
          opacity: 1;
        }
      `}
    }
    padding: calc(var(--nav-padding) / 8) var(--nav-padding);
    ${!navOpen &&
        detached &&
        css `
      padding-inline: 0;
      width: calc(${navWidth} - 2 * var(--nav-padding));
      margin: auto;
    `}

    > :first-child {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding: calc(1.25 * ${theme.base.spacing}) 0;
      white-space: nowrap;
      color: ${foreground};
      cursor: pointer;
      text-decoration: none;
      border-block: ${pxToRem(1)} solid transparent;
      ${detached &&
        css `
        border-radius: ${theme.base['border-radius']};
      `}
      span:not(${StyledCountIcon}) {
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
        white-space: nowrap;
      }

      &:hover,
      &:focus {
        color: ${foreground};
        background: ${transparentize(0.9, foreground)};
      }

      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {
        ${navOpen &&
        css `
          opacity: 1;
        `}
      }
      &:focus {
        box-shadow: ${theme.base.shadow['focus-inset']};

        @media (forced-colors: none) {
          outline: none;
        }
      }

      ${StyledNavListItemExpandCollapse} {
        position: absolute;
        left: ${navOpen ? 'auto' : '100%'};
        ${navOpen &&
        css `
          inset-inline-end: 1rem;
        `}
        margin: 0;
        opacity: ${navOpen ? '1' : '0'};
        transition-property: transform, opacity;
        transition-duration: ${theme.base.animation.speed};
        transition-timing-function: ${theme.base.animation.timing.ease};

        ${!nestedListCollapsed &&
        css `
          transform: rotateZ(${rtl ? '-90deg' : '90deg'});
        `}
      }

      ${singleSelect &&
        css `
        ${StyledNavItemIconBox} > ${StyledIcon} {
          margin-inline: calc(${theme.base.spacing} - var(--nav-padding));
        }
      `}

      ${StyledSingleSelectIconBox} + span {
        margin-inline-start: ${theme.base.spacing};
      }
    }

    [aria-current='page'],
    [aria-expanded='false']:has(+ ul [aria-current='page']) {
      position: relative;
      font-weight: ${semiBold};
      border-block: ${pxToRem(1)} solid ${theme.components['app-shell'].nav['border-color']};
      background: ${transparentize(0.85, foreground)};
      ${!detached &&
        css `
        &::before {
          content: '';
          position: absolute;
          width: ${pxToRem(4)};
          inset-inline-start: 0;
          top: 0;
          bottom: 0;
          background-color: ${foreground};
        }
      `}
    }
  `;
});
StyledNavListItem.defaultProps = defaultThemeProp;
export const StyledNavList = styled.ul(({ theme: { base: { spacing }, components: { 'app-shell': { nav: { detached } } } } }) => {
    return css `
      --nav-padding: ${detached ? spacing : '0px'};
    `;
});
StyledNavList.defaultProps = defaultThemeProp;
export const StyledNavCasesList = styled.div(({ theme }) => {
    return css `
    ${StyledNavListItem} {
      > :first-child {
        padding: ${theme.base.spacing} 0;
      }
    }
  `;
});
StyledNavCasesList.defaultProps = defaultThemeProp;
export const StyledNestedNavList = styled(StyledNavList)(({ theme }) => {
    const { base: { 'border-radius': borderRadius }, components: { 'app-shell': { nav: { detached } } } } = theme;
    const { nestedList } = navContrastColors(theme);
    return css `
    background: ${nestedList};
    border-radius: ${detached ? borderRadius : '0px'};
    padding-block: var(--nav-padding);

    ${StyledNavListItem} {
      > :first-child {
        &:has(${StyledIcon}) {
          padding-inline-start: calc(
            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconWidth}
          );
        }

        &:not(:has(${StyledIcon})) {
          padding-inline-start: calc(${navWidth} - 3 * var(--nav-padding));
        }
      }
    }
  `;
});
StyledNestedNavList.defaultProps = defaultThemeProp;
export const StyledCaseTypes = styled.div(props => {
    const { theme: { base: { animation: { speed, timing: { ease: acceleration } } } } } = props;
    return css `
    button {
      ${StyledNavItemIconBox} {
        transition: transform ${speed} ${acceleration};
      }

      &[aria-expanded='false'] ${StyledNavItemIconBox} {
        transform: none;
      }

      &[aria-expanded='true'] ${StyledNavItemIconBox} {
        transform: rotateZ(45deg);
      }
    }
  `;
});
StyledCaseTypes.defaultProps = defaultThemeProp;
export const StyledUtils = styled.div(({ theme }) => {
    return css `
    border-top: 0.0625rem solid ${theme.components['app-shell'].nav['border-color']};

    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {
      margin: 0 calc((${navWidth} - ${iconWidth}) / 2);
    }
  `;
});
StyledUtils.defaultProps = defaultThemeProp;
export const StyledMobileNav = styled.header(({ theme }) => {
    const mobileNavColor = theme.components['app-shell'].nav.background;
    const { foreground } = navContrastColors(theme);
    return css `
    min-width: 100%;
    min-height: ${headerHeight};
    z-index: ${theme.base['z-index'].drawer};
    background: ${mobileNavColor};
    color: ${foreground};
    padding-inline-start: ${theme.base.spacing};

    @media (pointer: coarse) {
      padding-inline-start: 0;
    }

    @media (height >= ${theme.base.breakpoints.sm}) {
      inset-block-start: 0;
      position: sticky;
    }
  `;
});
StyledMobileNav.defaultProps = defaultThemeProp;
export const StyledLoading = styled.div `
  font-size: 2rem;
`;
export const StyledAppMain = styled.main(({ appHeader, mobileNav, navOpen, previewActive, headerOffset = 0, theme }) => {
    const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';
    const appBackground = theme.base.palette['app-background'];
    return css `
    --appshell-offset: ${headerOffset}px;
    /* stylelint-disable-next-line length-zero-no-unit */
    --appshell-horizontal-offset: 0rem;

    @media (min-width: ${theme.base.breakpoints.sm}) {
      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};
    }
    position: relative;
    margin-inline-start: ${mobileNav ? 0 : navWidth};
    min-height: calc(100vh - ${heightOffset});
    background: ${appBackground};

    &:focus {
      outline: none;
    }

    ${navOpen &&
        !mobileNav &&
        css `
      margin-inline-start: ${navOpenWidth};
    `}

    ${!mobileNav &&
        css `
      transition: margin-inline-start
        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
    `}

    & > ${StyledProgressBackdrop} {
      max-height: calc(100vh - ${heightOffset});
      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});
      inset-block-start: ${heightOffset};
      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};
      position: fixed;
      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;
      transition-duration: ${theme.base.animation.speed};
      transition-timing-function: ${theme.base.animation.timing.ease};
    }

    @media (min-width: ${theme.base.breakpoints.xl}) {
      transition: margin-inline-end ${!mobileNav ? ', margin-inline-start' : ''};
      transition-duration: ${theme.base.animation.speed};
      transition-timing-function: ${theme.base.animation.timing.ease};

      ${previewActive &&
        css `
        transition: none;
        margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
      `}
    }
  `;
});
StyledAppMain.defaultProps = defaultThemeProp;
export const StyledBannerRegion = styled.div(({ theme }) => {
    return css `
    padding: calc(2 * ${theme.base.spacing});
  `;
});
StyledBannerRegion.defaultProps = defaultThemeProp;
export const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {
    const bg = theme.components.tooltip['background-color'];
    const color = readableColor(bg);
    return css `
    background-color: ${bg};
    padding: 0;
    header {
      color: ${color};
      border-bottom: none;
    }
    ${StyledMenuItem} {
      background-color: ${bg};
      color: ${color};

      &:hover,
      &:focus {
        background-color: ${bg};
        box-shadow: ${theme.base.shadow.focus};
      }
    }
  `;
});
StyledAppShellTooltip.defaultProps = defaultThemeProp;
export const StyledAppShellToggleButton = styled(Button)(({ theme }) => {
    const navBg = theme.components['app-shell'].nav.background;
    const navFgColor = theme.components['app-shell'].nav['foreground-color'];
    const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);
    let bg = darken(0.2, backgroundColor);
    if (getContrast(backgroundColor, bg) < 1.3) {
        bg = lighten(0.2, backgroundColor);
    }
    return css `
    background: ${bg};
    color: ${navFgColor};
    border: none;
    margin-top: calc(1 * ${theme.base.spacing});

    ${StyledIcon} {
      width: 1.25rem;
      height: 1.25rem;
      font-weight: bold;
    }

    &:enabled:focus,
    :not([disabled]):focus {
      box-shadow: ${theme.base.shadow.focus};
    }
  `;
});
StyledAppShellToggleButton.defaultProps = defaultThemeProp;
//# sourceMappingURL=AppShell.styles.js.map