import { mix, rgba, transparentize } from 'polished';
import styled, { css } from 'styled-components';
import { calculateFontSize, getHoverColors, readableColor } 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, 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 } } } }) => {
    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;

        &:not([focused]) {
          ${StyledSearchInput} {
            ${StyledSearchButton} {
              background: ${header['background-color']};
              color: ${palette['foreground-color']};
            }

            ${StyledSearchTextInput} {
              background: ${header['background-color']};
            }
          }
        }

        &:focus-within {
          min-width: 10rem;
        }
      `}
    `;
});
StyledAppHeaderSearchForm.defaultProps = defaultThemeProp;
export const StyledAppHeaderSpacer = styled.div `
  margin: auto;
`;
export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
    const contrastColor = tryCatch(() => readableColor(theme.components['app-shell'].header['background-color']));
    const secondaryColor = tryCatch(() => rgba(contrastColor ?? 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 : contrastColor};
    font-size: ${fontSize.s};

    ${variant !== 'secondary' &&
        css `
      font-weight: ${theme.base['font-weight']['semi-bold']};
    `}
  `;
});
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 headerColor = theme.components['app-shell'].header['background-color'];
    const contrastColor = tryCatch(() => readableColor(headerColor));
    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));
    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-color: ${headerColor};
      color: ${contrastColor};
      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};

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

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

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

        + ${StyledPopover} {
          &,
          ${StyledMenuListContainer} {
            background-color: ${headerColor};
          }

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

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