import { transparentize } from 'polished';
import styled, { css } from 'styled-components';
import MenuButton from '../MenuButton';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import Button, { StyledButton } from '../Button';
import Input from '../Input';
import Icon from '../Icon';
export const StyledSearchButton = styled(Button)(({ theme: { base: { spacing, 'border-radius': borderRadius, shadow: { 'focus-inset': focusShadow } }, components: { 'search-input': searchInput, 'form-control': formControl } } }) => {
    return css `
    border: ${formControl['border-width']} solid ${formControl['border-color']};
    border-inline-start: unset;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});
    border-end-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});
    padding-inline: ${spacing} calc(1.25 * ${spacing});

    &:hover {
      border-color: ${formControl[':hover']['border-color']};
    }

    &:focus:enabled {
      box-shadow: ${focusShadow};
    }
  `;
});
StyledSearchButton.defaultProps = defaultThemeProp;
export const StyledSearchFiltersButton = styled(MenuButton)(({ theme: { base: { spacing, 'border-radius': borderRadius, shadow: { 'focus-inset': focusShadow } }, components: { 'search-input': searchInput, 'form-control': formControl } } }) => {
    return css `
    border: ${formControl['border-width']} solid ${formControl['border-color']};
    border-inline-end: unset;
    border-start-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});
    border-end-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    padding-inline: ${spacing} 0;

    &:hover {
      border-color: ${formControl[':hover']['border-color']};
    }

    &:focus:enabled {
      box-shadow: ${focusShadow};
    }
  `;
});
StyledSearchFiltersButton.defaultProps = defaultThemeProp;
export const StyledClearButton = styled(Button)(({ theme: { base: { 'hit-area': hitArea }, components: { input } } }) => {
    return css `
    position: absolute;
    inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);

    & + ${StyledButton} {
      margin-inline-start: 0;
    }

    @media (pointer: coarse) {
      inset-block-start: calc((${hitArea['finger-min']} - ${hitArea.compact}) / 2);
    }
  `;
});
StyledClearButton.defaultProps = defaultThemeProp;
export const StyledSearchIcon = styled(Icon)(({ theme: { base: { 'hit-area': hitArea, palette }, components: { input } } }) => {
    const iconColor = tryCatch(() => transparentize(0.3, palette['foreground-color']));
    return css `
    position: absolute;
    pointer-events: none;
    color: ${iconColor};
    z-index: 1;
    /* stylelint-disable-next-line unit-allowed-list */
    inset-block-start: calc((${input.height} - max(1.125rem, 14px)) / 2);

    @media (pointer: coarse) {
      /* stylelint-disable-next-line unit-allowed-list */
      inset-block-start: calc((${hitArea['finger-min']} - max(1.125rem, 14px)) / 2);
    }
  `;
});
StyledSearchIcon.defaultProps = defaultThemeProp;
export const StyledSearchTextInput = styled(Input)(({ theme }) => {
    return css `
    flex: 1;
    background-color: transparent;
    border-radius: inherit;
    height: 100%;
    min-height: 100%;

    &::-ms-clear {
      display: none;
    }

    &::-webkit-search-cancel-button {
      display: none;
    }

    ::-webkit-search-decoration {
      -webkit-appearance: none;
    }

    &:focus:not([disabled]) {
      box-shadow: ${theme.base.shadow['focus-inset']};
      border-color: ${theme.components['form-control']['border-color']};

      :hover {
        border-color: ${theme.components['form-control'][':hover']['border-color']};
      }
    }
  `;
});
StyledSearchTextInput.defaultProps = defaultThemeProp;
export const StyledSearchInput = styled.div(({ hasFilters, showSubmit, theme }) => {
    const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;
    return css `
      position: relative;
      background: ${theme.components['form-control']['background-color']};
      min-height: ${theme.components.input.height};
      height: ${theme.components.input.height};
      border-radius: ${borderRadius};

      @media (pointer: coarse) {
        min-height: ${theme.base['hit-area']['finger-min']};
        min-width: ${theme.base['hit-area']['finger-min']};
      }
      --button-padding-inner: ${theme.base.spacing};
      --button-padding-outer: calc(${theme.base.spacing} * 1.25);
      /* stylelint-disable-next-line unit-allowed-list */
      --icon-size: max(1.125rem, 14px);
      --min-button-size: ${theme.base['hit-area']['mouse-min']};
      --search-button-size: max(
        var(--button-padding-inner) + var(--icon-size) + var(--button-padding-outer) +
          ${theme.components.button['border-width']},
        var(--min-button-size)
      );

      @media (pointer: coarse) {
        --min-button-size: ${theme.base['hit-area']['finger-min']};
      }

      ${showSubmit
        ? css `
            /* stylelint-disable length-zero-no-unit */
            --search-icon-start-size: 0rem;
            --search-icon-end-size: 0rem;
            --search-button-end-size: var(--search-button-size);
            /* stylelint-enable length-zero-no-unit */
          `
        : css `
            ${hasFilters
            ? css `
                  /* stylelint-disable length-zero-no-unit */
                  --search-icon-start-size: 0rem;
                  --search-icon-end-size: calc(
                    var(--search-button-size) - var(--button-padding-inner)
                  );
                  --search-button-end-size: 0rem;
                  /* stylelint-enable length-zero-no-unit */
                `
            : css `
                  /* stylelint-disable length-zero-no-unit */
                  --search-icon-start-size: calc(
                    var(--search-button-size) - var(--button-padding-inner)
                  );
                  --search-icon-end-size: 0rem;
                  --search-button-end-size: 0rem;
                  /* stylelint-enable length-zero-no-unit */
                `}
          `}

      ${StyledSearchTextInput} {
        ${showSubmit && !hasFilters
        ? css `
              padding-inline-start: max(
                ${theme.components.input.padding},
                calc(${theme.base.spacing} * 1.5)
              );
            `
        : css `
              padding-inline-start: calc(
                ${theme.components.input.padding} + var(--search-icon-start-size)
              );
            `}
        padding-inline-end: calc(
          ${theme.components.input.padding} + var(--clear-button-size-plus-gap) +
            var(--search-icon-end-size)
        );
        --clear-button-size-plus-gap: calc(
          max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +
            ${theme.components.input.padding}
        );

        &[value=''] {
          /* stylelint-disable-next-line length-zero-no-unit */
          --clear-button-size-plus-gap: 0rem;
        }

        ${showSubmit &&
        css `
          border-start-end-radius: 0;
          border-end-end-radius: 0;
        `}

        ${hasFilters &&
        css `
          border-start-start-radius: 0;
          border-end-start-radius: 0;
        `}
      }

      ${StyledClearButton} {
        inset-inline-end: calc(
          ${theme.components.input.padding} +
            max(var(--search-icon-end-size), var(--search-button-end-size))
        );
      }

      ${StyledSearchIcon} {
        --inset: calc(
          max(var(--button-padding-outer), calc((var(--min-button-size) - var(--icon-size)) / 2)) +
            ${theme.components.button['border-width']}
        );

        ${hasFilters
        ? css `
              inset-inline-end: var(--inset);
            `
        : css `
              inset-inline-start: var(--inset);
            `}
      }
    `;
});
StyledSearchInput.defaultProps = defaultThemeProp;
export const StyledSearchMenu = styled.div `
  header {
    border-bottom: none;
  }
`;
export const StyledSearchResultsContainer = styled.div `
  padding-top: ${props => props.theme.base.spacing};
`;
StyledSearchResultsContainer.defaultProps = defaultThemeProp;
export const StyledFiltersPopover = styled.div ``;
export const StyledResultsPopover = styled.div ``;
//# sourceMappingURL=SearchInput.styles.js.map