import { mix } from 'polished';
import styled, { css } from 'styled-components';
import { useDirection } from '../../hooks';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import { StyledGrid } from '../Grid';
import { NumberDisplay } from '../Number';
import StyledNumberInput from '../Number/NumberInput.styles';
import StyledInput from '../Input/Input.styles';
export const StyledThumb = styled.div(({ theme: { base: { palette: { 'primary-background': bgColor, 'border-line': borderColor, interactive: fgColor }, spacing, 'border-radius': borderRadius }, components: { button } } }) => {
    const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));
    return css `
      border: ${button['border-width']} solid ${borderColor};
      border-radius: calc(${borderRadius} * 3);
      outline: none;
      background-color: ${bgColor};
      width: calc(${spacing} * 3);
      height: calc(${spacing} * 3);
      cursor: pointer;

      &:focus {
        box-shadow: ${button['focus-shadow']};
      }

      &:hover,
      &:active {
        background-color: ${hoverBgColor};
        border-color: ${fgColor};
      }
    `;
});
StyledThumb.defaultProps = defaultThemeProp;
export const StyledBar = styled.div(({ theme, showProgress }) => {
    const { base: { spacing, colors, 'border-radius': borderRadius, palette: { interactive: interactiveColor } } } = theme;
    const { ltr } = useDirection();
    return css `
    border-radius: ${borderRadius};
    height: ${spacing};
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: ${colors.gray.light};

    ${showProgress &&
        css `
      ::before {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: ${interactiveColor};
        ${ltr
            ? css `
              transform: translateX(calc(-100% + var(--slider-value, 0rem)));
            `
            : css `
              transform: translateX(calc(100% - var(--slider-value, 0rem)));
            `}
      }
    `}
  `;
});
StyledBar.defaultProps = defaultThemeProp;
export const StyledTrack = styled.div(({ theme: { base: { spacing } } }) => {
    const { ltr } = useDirection();
    return css `
      height: calc(${spacing} * 4);
      width: 100%;
      cursor: pointer;
      position: relative;

      > ${StyledThumb} {
        z-index: 1;
        position: absolute;
        top: calc(${spacing} / 2);
        left: var(--slider-value);
        right: var(--slider-value);
        ${ltr
        ? css `
              transform: translate(-50%, 0);
            `
        : css `
              transform: translate(50%, 0);
            `}
      }
    `;
});
StyledTrack.defaultProps = defaultThemeProp;
export const StyledTicksContainer = styled.div `
  width: 100%;

  div {
    &::before {
      content: '';
      display: table;
      background: ${p => p.theme.base.palette['foreground-color']};
    }
  }
`;
StyledTicksContainer.defaultProps = defaultThemeProp;
export const StyledSliderTrackWrapper = styled.div `
  width: 100%;
`;
StyledSliderTrackWrapper.defaultProps = defaultThemeProp;
export const StyledPreview = styled(NumberDisplay) `
  width: ${props => props.size}ch;
  flex-shrink: 0;
`;
StyledPreview.defaultProps = defaultThemeProp;
export const StyledSlider = styled.div(props => {
    const { theme: { base: { spacing, palette }, components: { 'form-field': formField } }, status, orientation, size } = props;
    const statusColor = status && formField[status] ? formField[status]['status-color'] : 'transparent';
    const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));
    const borderColor = status && formField[status] ? formField[status]['status-color'] : palette['border-line'];
    return css `
    > span {
      line-height: calc(${spacing} * 4);
    }

    ${StyledInput} {
      width: calc(${size}ch + ${spacing});
    }

    ${orientation === 'horizontal'
        ? css `
          ${StyledSliderTrackWrapper} {
            margin-inline: calc(1.5 * ${spacing});

            ${StyledTrack},
            ${StyledThumb} {
              grid-row: 1;
            }

            ${StyledBar} {
              /* extend by thumb width */
              min-width: calc(100% + ${spacing} * 3);
            }

            ${StyledTicksContainer} {
              grid-row: 2;
            }

            & + ${StyledNumberInput}, & + ${StyledPreview} {
              margin-inline-start: calc(2 * ${spacing});
              text-align: center;
            }
          }
        `
        : css `
          ${StyledSliderTrackWrapper} {
            grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);
            grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;
            margin-top: ${spacing};

            ${StyledTrack} {
              grid-row: track-start / track-end;
              height: 100%;
              transform: scale(-1);

              ${StyledBar} {
                height: 100%;
                width: ${spacing};

                ::before {
                  transform: translateY(calc(-100% + var(--slider-value, 0rem)));
                }
              }
            }

            ${StyledThumb} {
              grid-row: track-start / track-end;
              top: auto;
              bottom: calc(100% - var(--slider-value));
              left: calc(${spacing} / 2);
              right: calc(${spacing} / 2);
              transform: translate(0, 50%);
            }

            ${StyledTicksContainer} {
              grid-row: 1 / -1;
              height: 100%;
            }

            & + ${StyledNumberInput}, & + ${StyledPreview} {
              margin-top: calc(2 * ${spacing});
              text-align: center;

              input {
                border-radius: inherit;
              }
            }
          }
        `}

    &[disabled],
    &[readonly] {
      ${StyledTrack} {
        cursor: default;
      }

      ${StyledThumb} {
        cursor: default;
        border-color: ${palette['border-line']};
        :hover,
        :active {
          background-color: ${palette['background-color']};
        }
      }
    }

    ${status &&
        css `
      ${StyledBar}::before {
        background-color: ${statusColor};
      }

      ${StyledThumb} {
        border-color: ${borderColor};
        :hover,
        :active {
          background-color: ${thumbBgColor};
        }
      }
    `}
  `;
});
StyledSlider.defaultProps = defaultThemeProp;
export const StyledTickItem = styled(StyledGrid)(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {
    const spacing = theme.base.spacing;
    const { ltr } = useDirection();
    return css `
    overflow: hidden;

    ${orientation === 'horizontal'
        ? css `
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          &::before {
            width: 0.0625rem;
            height: ${spacing};
            transform: translateY(-50%);
            margin: 0 auto;
          }

          ${lowerBoundaryItem &&
            css `
            text-align: start;
            transform: translate(-0.5ch, 0);
            &::before {
              margin-inline-start: 0.5ch;
            }
          `}

          ${upperBoundaryItem &&
            css `
            text-align: end;
            transform: translate(0.5ch, 0);
            &::before {
              margin-inline-end: 0.5ch;
            }
          `}
        `
        : css `
          display: flex;
          align-items: center;

          &::before {
            width: ${spacing};
            height: calc(${spacing} / 8);
            ${ltr
            ? css `
                  transform: translateX(-50%);
                `
            : css `
                  transform: translateX(50%);
                `}
          }
        `}
  `;
});
StyledTickItem.defaultProps = defaultThemeProp;
export const StyledTickButton = styled.span `
  cursor: pointer;
  line-height: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  outline: 0;
`;
StyledTickButton.defaultProps = defaultThemeProp;
//# sourceMappingURL=Slider.styles.js.map