import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { lineClamp } from '../../styles/mixins';
import { calculateFontSize } from '../../styles/utils';
import { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';
import { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';
import { StyledIcon } from '../Icon';
const imageContainerSizes = {
    small: '2.75rem',
    large: '8.875rem',
    flexible: 'minmax(2.5rem, auto)'
};
export const StyledSelectionCard = styled.div(({ disabled, readOnly, onClick, theme: { base: { palette, 'disabled-opacity': disabledOpacity }, components: { card, 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }, ':hover': { 'border-color': hoverBorderColor } } } } }) => {
    return css `
      min-width: min-content;
      max-width: max-content;
      background-color: ${card.background};
      border-radius: ${card['border-radius']};
      border: 0.0625rem solid ${palette['border-line']};

      ${disabled &&
        css `
        cursor: not-allowed;
        opacity: ${disabledOpacity};
      `}

      ${!disabled &&
        css `
        &:focus {
          & ${StyledPseudoRadioCheck} {
            box-shadow: ${shadow};
            border-color: ${focusBorderColor};
          }
        }

        &:focus,
        &:not([data-main-focus]):focus-within {
          box-shadow: ${shadow};
          border-color: transparent;
          outline: none;
        }
      `}

        ${!disabled &&
        onClick &&
        css `
        cursor: pointer;
      `}

      ${!disabled &&
        !readOnly &&
        onClick &&
        css `
        &:hover:not(:focus-within) {
          border-color: ${hoverBorderColor};
        }
      `}
    `;
});
StyledSelectionCard.defaultProps = defaultThemeProp;
export const StyledSelectionCardInline = styled(StyledSelectionCard)(({ placement = 'inline-start', size = 'large' }) => {
    const imageContainerSize = imageContainerSizes[size];
    return css `
    /* stylelint-disable-next-line unit-allowed-list */
    grid-template-columns: ${placement === 'inline-end'
        ? `1fr ${imageContainerSize}`
        : `${imageContainerSize} 1fr`};
    grid-template-rows: minmax(2.75rem, auto);
  `;
});
StyledSelectionCardInline.defaultProps = defaultThemeProp;
export const StyledSelectionCardStacked = styled(StyledSelectionCard)(({ size = 'large' }) => {
    let containerSize;
    switch (size) {
        case 'small':
            containerSize = '2.5rem';
            break;
        case 'large':
            containerSize = '15.125rem';
            break;
        default:
            containerSize = 'minmax(2.5rem, 15.125rem)';
    }
    return css `
    grid-template-columns: minmax(2.75rem, 1fr);
    grid-template-rows: ${containerSize} auto;
  `;
});
export const StyledImageCell = styled.div(({ theme: { base: { palette, transparency }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible', isTile }) => {
    return css `
      ${isTile
        ? css `
            overflow: hidden;
          `
        : css `
            background-color: ${palette['app-background']};
            position: relative;
          `}

      ${size === 'flexible' &&
        placement !== 'block-start' &&
        css `
        max-width: 8.875rem;
        min-height: 100%;
        height: var(--content-height, auto);
      `};

      /* Recalculation of the border radius by substracting border width */
      ${placement === 'inline-start' &&
        css `
        border-start-start-radius: calc(${borderRadius} - 0.0625rem);
        border-end-start-radius: calc(${borderRadius} - 0.0625rem);
      `}

      ${placement === 'inline-end' &&
        css `
        border-end-end-radius: calc(${borderRadius} - 0.0625rem);
        border-start-end-radius: calc(${borderRadius} - 0.0625rem);
      `}

      ${placement === 'block-start' &&
        css `
        border-start-start-radius: calc(${borderRadius} - 0.0625rem);
        border-start-end-radius: calc(${borderRadius} - 0.0625rem);
      `}

      ${!isTile &&
        css `
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background: var(--bg-image) center / cover no-repeat;
          filter: blur(1rem);
          opacity: ${transparency['transparent-4']};
          pointer-events: none;
          clip-path: inset(0);
        }
      `}
    `;
});
StyledImageCell.defaultProps = defaultThemeProp;
export const StyledContentCell = styled.div `
  display: flex;
  flex-direction: column;
`;
export const StyledImageContainer = styled.div(({ theme: { base: { transparency, spacing }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
    return css `
      aspect-ratio: 4 / 5;
      max-height: 100%;
      min-height: 2rem;
      min-width: 2rem;
      position: relative;
      padding: min(${spacing}, 10%);

      img {
        max-width: 100%;
        max-height: 100%;
        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});
        border-radius: calc(${borderRadius} / 2);
      }

      ${placement === 'block-start' &&
        css `
        aspect-ratio: 16 / 9;
        > img {
          max-height: 100%;
        }
      `}

      ${size === 'flexible' &&
        css `
        min-height: 100%;
      `}

      ${size === 'large' &&
        css `
        min-height: 11.0625rem;
      `}

      ${size === 'small' &&
        css `
        aspect-ratio: 1 / 1;

        > img {
          max-width: 2rem;
          max-height: 2rem;
        }
      `}

      ${StyledIcon} {
        opacity: ${transparency['transparent-3']};
      }
    `;
});
StyledImageContainer.defaultProps = defaultThemeProp;
export const StyledValueList = styled.ul `
  width: 100%;
  list-style-type: none;
`;
export const StyledHeader = styled.div `
  width: 100%;
`;
export const StyledContentContainer = styled.div(({ theme }) => {
    return css `
    padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});
    overflow-wrap: break-word;

    > ${StyledHeader} {
      min-height: 2rem;
    }

    ${StyledValueList}, ${StyledFieldValueList} {
      margin-block-end: calc(0.75 * ${theme.base.spacing});
    }

    ${StyledStackedFieldValue} {
      grid-column: 1 / -1;
    }
  `;
});
StyledContentContainer.defaultProps = defaultThemeProp;
export const StyledTileContent = styled.div(({ theme, foregroundColor, backgroundColor, size = 'large' }) => {
    const fg = foregroundColor;
    const bg = backgroundColor;
    const { l: fontSizeL, xs: fontSizeXs } = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    const { components: { icon: { size: iconSize } } } = theme;
    return css `
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.5 * ${theme.base.spacing});
    width: 100%;
    height: 100%;
    background: ${bg};
    color: ${fg};
    font-weight: ${theme.base['font-weight']['semi-bold']};
    font-size: ${fontSizeL};

    ${StyledIcon} {
      width: ${iconSize.s};
      height: ${iconSize.s};
      color: inherit;
    }

    ${size === 'small' &&
        css `
      padding: ${theme.base.spacing};
      font-size: ${fontSizeXs};
    `}
  `;
});
StyledTileContent.defaultProps = defaultThemeProp;
export const StyledCardFooter = styled.div(({ theme }) => {
    return css `
    margin-block-start: auto;
    padding-inline: calc(1.5 * ${theme.base.spacing});
    padding-block-end: ${theme.base.spacing};
  `;
});
StyledCardFooter.defaultProps = defaultThemeProp;
export const StyledSingleField = styled.div `
  ${({ truncate }) => truncate && lineClamp(2)}
`;
export const getBaseCardContainerStyles = (theme) => {
    return css `
    display: grid;
    gap: ${theme.base.spacing};
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)
    );
    grid-auto-rows: minmax(2.75rem, auto);

    > ${StyledSelectionCard} {
      max-width: 100%;
    }
  `;
};
const getInlineCardColumnTrack = ({ placement, size, contentWidth }) => {
    const imageContainerSize = imageContainerSizes[size];
    return placement === 'inline-end'
        ? `minmax(20ch, ${contentWidth}) 1fr ${imageContainerSize}`
        : `${imageContainerSize} minmax(20ch, ${contentWidth}) 1fr`;
};
export const getInlineImageCardContainerStyles = (theme, { placement, size }) => {
    const columnTrack = getInlineCardColumnTrack({
        placement,
        size,
        contentWidth: theme.base['content-width'].sm
    });
    const singleCardSize = `calc(${theme.base['content-width'].sm} + ${imageContainerSizes[size === 'small' ? 'small' : 'large']})`;
    return css `
    display: grid;
    gap: ${theme.base.spacing};
    grid-template-columns: ${columnTrack};

    @container (min-width: calc(2 * ${singleCardSize})) {
      grid-template-columns: repeat(2, ${columnTrack});
    }

    @container (min-width: calc(3 * ${singleCardSize})) {
      grid-template-columns: repeat(3, ${columnTrack});
    }

    @container (min-width: calc(4 * ${singleCardSize})) {
      grid-template-columns: repeat(4, ${columnTrack});
    }

    > ${StyledSelectionCard} {
      grid-template-columns: subgrid;
      grid-column: span 3;
      column-gap: 0;

      ${StyledImageCell} {
        grid-column: ${placement === 'inline-start' ? '1 / 2' : '3 / 4'};
      }

      ${StyledContentCell} {
        grid-column: span 2;
      }
    }
  `;
};
//# sourceMappingURL=SelectionCard.styles.js.map