import { mix, rgba, transparentize } from 'polished';
import styled, { css } from 'styled-components';
import { calculateFontSize, getHoverColors, calculateForegroundColor, calculateBackgroundAndContrastColor } from '../../styles';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import { StyledImage } from '../Image';
import { StyledMenuListContainer } from '../Menu/Menu.styles';
import { StyledPopover } from '../Popover';
import { StyledSearchInput } from '../SearchInput';
import { StyledSearchButton, StyledSearchFiltersButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';
import Text from '../Text';
import { headerHeight, navWidth } from './AppShell.styles';
export const StyledContextSwitcher = styled.div(({ theme }) => {
    return css `
    width: calc(${navWidth} - 2 * ${theme.base.spacing});
  `;
});
StyledContextSwitcher.defaultProps = defaultThemeProp;
export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
    return css `
    & > :first-child {
      vertical-align: top;
    }

    & > :is(a, button) {
      cursor: pointer;
      text-decoration: none;
      user-select: none;
      -webkit-user-select: none;
    }

    & > :is(a, button):focus {
      box-shadow: ${theme.base.shadow.focus};
      outline: none;
    }

    ${StyledImage} {
      height: 1.625rem;

      ${centerLogo &&
        css `
        padding-inline-start: ${theme.base.spacing};
      `}
    }
  `;
});
StyledAppHeaderInfo.defaultProps = defaultThemeProp;
export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme: { base: { animation, palette }, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor } } } } }) => {
    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
    const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFgColor);
    return css `
      max-width: 33vw;
      min-width: 10rem;
      width: 100%;
      justify-self: center;
      margin-inline-start: 0;
      margin-inline-end: auto;
      transition: max-width ${animation.speed} ${animation.timing.ease};

      ${StyledSearchInput} input::placeholder {
        color: ${transparentize(0.4, palette['foreground-color'])};
      }

      ${!isMediumOrAbove &&
        css `
        max-width: 75%;
        min-width: 2rem;
        margin-inline-start: auto;

        &:focus-within {
          min-width: 10rem;
        }
      `}
      &:not([focused]) {
        ${StyledSearchInput} {
          background: ${backgroundColor};
          ${StyledSearchButton} {
            background: ${backgroundColor};
            color: ${foregroundColor};
          }

          ${StyledSearchTextInput} {
            background: ${backgroundColor};
            color: ${foregroundColor};
          }

          ${StyledSearchFiltersButton} {
            background: ${backgroundColor};
            color: ${foregroundColor};
          }
        }
      }
    `;
});
StyledAppHeaderSearchForm.defaultProps = defaultThemeProp;
export const StyledAppHeaderSpacer = styled.div `
  margin: auto;
`;
export const StyledAppHeaderLogo = styled.div(({ theme }) => {
    return css `
    max-width: min(${theme.base['content-width'].sm}, 25vw);
  `;
});
StyledAppHeaderLogo.defaultProps = defaultThemeProp;
export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
    const headerBg = theme.components['app-shell'].header.background;
    const headerFgColor = theme.components['app-shell'].header['foreground-color'];
    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
    const secondaryColor = tryCatch(() => rgba(foregroundColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: ${variant === 'secondary' ? secondaryColor : foregroundColor};
    font-size: ${fontSize[theme.components.text['brand-primary']['font-size']]};
    font-family: ${theme.components.text['brand-primary']['font-family']};

    ${variant !== 'secondary' &&
        css `
      font-weight: ${theme.components.text['brand-primary']['font-weight']};
    `}
  `;
});
StyledAppHeaderText.defaultProps = defaultThemeProp;
export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
    border-radius: 50%;

    :focus {
      box-shadow: ${theme.base.shadow.focus};
    }
  `);
StyledAppHeaderOperator.defaultProps = defaultThemeProp;
export const StyledAppHeader = styled.header(({ hideTitle, drawerOpen, theme }) => {
    const headerBg = theme.components['app-shell'].header.background;
    const headerFgColor = theme.components['app-shell'].header['foreground-color'];
    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
    const hoverColors = getHoverColors(tryCatch(() => mix(0.01, theme.base.palette.interactive, headerBg), () => theme.base.palette.interactive));
    return css `
      position: sticky;
      z-index: calc(${theme.base['z-index'].backdrop} - 1);
      ${drawerOpen &&
        css `
        z-index: calc(${theme.base['z-index'].backdrop} - 2);
      `}
      top: 0;
      gap: ${theme.base.spacing};
      max-width: 100%;
      height: ${headerHeight};
      background: ${headerBg};
      color: ${foregroundColor};
      border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};

      ${StyledAppHeaderInfo} {
        justify-self: flex-start;
        min-width: 33vw;

        ${hideTitle &&
        css `
          min-width: fit-content;
        `}
      }

      ${StyledSearchFiltersButton} {
        color: ${foregroundColor};
      }

      > ${StyledAppHeaderOperator} {
        justify-self: flex-end;

        + ${StyledPopover} {
          &,
          ${StyledMenuListContainer} {
            background: ${headerBg};
          }

          ${StyledMenuListContainer} li {
            color: ${foregroundColor};
            background-color: transparent;

            &:hover,
            &[data-current='true'] {
              color: ${hoverColors.foreground};
              background-color: ${hoverColors.background};
            }
          }
        }
      }
    `;
});
StyledAppHeader.defaultProps = defaultThemeProp;
//# sourceMappingURL=AppHeader.styles.js.map