import styled, { css } from 'styled-components';
import { size } from 'polished';
import { defaultThemeProp } from '../../theme';
import BareButton from '../Button/BareButton';
import Popover from '../Popover';
import { StyledText } from '../Text';
import { calculateFontSize } from '../../styles';
import { useDirection } from '../../hooks';
import Flex from '../Flex';
import { ellipsisOverflow } from '../../styles/mixins';
/** Min width of each step item including labels in ch units */
export const stepItemMinWidth = 15;
/** Min width of step marker without labels in ch units */
export const stepMarkerMinWidth = 3;
export const CurrentStepPopover = styled(Popover) `
  max-width: 100%;
  background-color: transparent;
  z-index: 0;
  box-shadow: none;
  animation: none;

  & > ${StyledText} {
    ${ellipsisOverflow}
  }
`;
const calculateStepMarkerSizes = (fontSize, fontScale) => {
    const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);
    return {
        stepMarkerSize,
        smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,
        bigStepMarkerSize: `calc(${stepMarkerSize} * 1.5)`
    };
};
const calculateBarTopPadding = (fontSize, fontScale, lineHeight) => {
    const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);
    return {
        // assuming the step progress always contains current step marker which is the biggest one,
        // the top padding of the bar should be half of the big step marker size minus line height of the bar
        // to be vertically centered
        stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`
    };
};
export const StyledBar = styled.div(({ shifted, theme }) => {
    const { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
    const lineHeight = '0.125rem';
    const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);
    return css `
    position: absolute;
    ${shifted && `inset-block-start: ${stepBarTopPadding};`}
    width: 100%;
    height: ${lineHeight};
    background: ${borderColor};

    @media (forced-colors: active) {
      background: CanvasText;
    }
  `;
});
StyledBar.defaultProps = defaultThemeProp;
export const StyledFill = styled.div(({ theme }) => {
    const { base: { animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive } } } = theme;
    const { ltr } = useDirection();
    const markedLineThicknessFactor = 2;
    return css `
    position: absolute;
    width: 100%;
    height: calc(100% * ${markedLineThicknessFactor});

    /* top position based on line thickness factor to keep the fill centered */
    top: calc(-50% * (${markedLineThicknessFactor} - 1));
    background: ${interactive};
    transition: all calc(2 * ${animationSpeed}) ${animationTiming};
    transform: scaleX(var(--fillScale));
    transform-origin: ${ltr ? 0 : '100%'} 0;

    @media (forced-colors: active) {
      background: Highlight;
    }
  `;
});
StyledFill.defaultProps = defaultThemeProp;
export const StyledFormProgress = styled(Flex)(({ showStepNames, theme }) => {
    const { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale }, components: { text: { h4: { 'font-size': h3fontSize } } } } = theme;
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
    position: relative;
    ${!showStepNames &&
        `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize]} * 1.35);`}
  `;
});
StyledFormProgress.defaultProps = defaultThemeProp;
export const StepMarker = styled(BareButton)(({ current, depth, completed, clickable, theme }) => {
    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor, 'border-width': borderWidth } } } = theme;
    const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);
    // Determine the actual size for this marker based on its state
    let markerSize = stepMarkerSize;
    if (current) {
        markerSize = bigStepMarkerSize;
    }
    else if (depth === 1) {
        markerSize = smallStepMarkerSize;
    }
    return css `
    position: relative;
    z-index: 1;

    /* Fixed container size based on the biggest marker to prevent layout shifts */
    ${size(bigStepMarkerSize)}
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    ${clickable
        ? css `
          border-color: ${interactive};
        `
        : css `
          cursor: default;
        `}

    &::before {
      content: '';
      ${size(markerSize)}
      position: absolute;
      border-radius: 100%;
      transition: all calc(2 * ${animationSpeed}) ${animationTiming};
    }

    &:focus::before {
      box-shadow: ${focusShadow};

      @media (forced-colors: active) {
        outline: 0.125rem solid Highlight;
        outline-offset: 0.125rem;
      }
    }

    ${!current &&
        css `
      border-color: transparent;
      background: transparent;

      &::before {
        background: ${primaryBackground};
        border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};

        ${completed &&
            css `
          background: ${interactive};
          border-color: ${interactive};
        `}

        @media (forced-colors: active) {
          background: ${completed ? 'Highlight' : 'Canvas'};
          border-color: ${clickable ? 'Highlight' : 'CanvasText'};
        }
      }
    `}

    ${current &&
        css `
      &::before {
        background: ${interactive};

        @media (forced-colors: active) {
          background: Highlight;
        }
      }
    `}

    ::after {
      content: '';
      position: absolute;
      ${size(buttonSize)}
      inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};
      inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};

      @media (pointer: coarse) {
        inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};
        inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};
        ${size(touchButtonSize)}
      }
    }
  `;
});
StepMarker.defaultProps = defaultThemeProp;
export const StyleHorizontalStepMarkers = styled.ol(({ showStepNames, theme }) => {
    return css `
      list-style-type: none;
      justify-content: space-between;

      li {
        display: flex;
        position: relative;
        flex: 1 1 0;

        /* min width changes based on whether step names are shown */
        min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};
        font-size: small;
        margin-inline: ${theme.base.spacing};
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      li:first-child,
      li:last-child {
        flex: 0.5 1 0;
        /* stylelint-disable-next-line unit-allowed-list */
        min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};
      }

      li:first-child {
        align-items: flex-start;
        text-align: left;
        margin-inline-start: 0;
        padding-inline-start: 0;

        ${StepMarker}::before {
          inset-inline-start: 0;
        }
      }

      li:last-child {
        align-items: flex-end;
        text-align: right;
        margin-inline-end: 0;
        padding-inline-end: 0;

        ${StepMarker}::before {
          inset-inline-end: 0;
        }
      }

      &:has(:focus-visible) {
        box-shadow: ${theme.base.shadow['focus-group']};
      }
    `;
});
StyleHorizontalStepMarkers.defaultProps = defaultThemeProp;
export const StyledVerticalStepMarkers = styled.ol `
  list-style-type: none;
`;
export const StyledBulletWrapper = styled.div(({ theme, hasNext, prior }) => {
    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed }, palette: { interactive } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
    const baseLineWidth = '0.125rem';
    const lineWidth = prior ? `calc(2 * ${baseLineWidth})` : baseLineWidth;
    const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);
    return css `
    position: relative;
    min-width: 2rem;

    ${hasNext &&
        css `
      &::after {
        content: '';
        position: absolute;

        /* Center the line horizontally and vertically relative to the step marker */
        inset-block-start: calc(${bigStepMarkerSize});
        inset-inline-start: calc(50% - (${lineWidth} / 2));
        width: ${lineWidth};
        height: 100%;
        background: ${prior ? interactive : borderColor};
        transition: background calc(2 * ${animationSpeed});

        @media (forced-colors: active) {
          background: ${prior ? 'Highlight' : 'CanvasText'};
        }
      }
    `}
  `;
});
StyledBulletWrapper.defaultProps = defaultThemeProp;
export const StyledStepText = styled.div(({ theme }) => {
    return css `
    padding-block: ${theme.base.spacing};
    overflow-wrap: break-word;
  `;
});
StyledStepText.defaultProps = defaultThemeProp;
export const StyledHorizontalStepText = styled.div(({ theme }) => {
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    padding-block: ${theme.base.spacing};
    overflow-wrap: break-word;
    min-width: inherit;
    font-size: ${fontSize.xxs};
    text-align: inherit;
  `;
});
StyledHorizontalStepText.defaultProps = defaultThemeProp;
//# sourceMappingURL=FormProgress.styles.js.map