import styled, { css } from 'styled-components';
import { getFontSize, convertToTransientProps, getSpacing, getColorAlias } from '../../utils/index.js';

const Wrapper = styled.div `
  font-family: ${(props) => props.theme.font.familyPrimary};
  display: flex;
  flex-direction: column;
  width: 100%;
  ${getFontSize('size16')};
`;
const SliderWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['isThumbText']),
}) `
  position: relative;
  display: flex;
  min-width: 150px;
  width: 100%;
  height: 40px;
  ${(props) => props.isThumbText
    ? css `
          margin-bottom: ${getSpacing('s02')};
        `
    : css `
          margin-bottom: ${getSpacing('s00')};
        `};
  cursor: pointer;
  align-items: center;
`;
const Input = styled.input ``;
const Track = styled.span.withConfig({
    shouldForwardProp: convertToTransientProps(['trackColor']),
}) `
  width: 100%;
  height: 4px;
  border-radius: ${(props) => props.theme.radius.roundedA};
  ${(props) => css `
    background: linear-gradient(
      to right,
      ${props.trackColor === 'primary'
    ? getColorAlias('interactiveBrand')
    : getColorAlias('supportInfoInverse')}
        0%,
      ${props.trackColor === 'primary'
    ? getColorAlias('interactiveBrand')
    : getColorAlias('supportInfoInverse')}
        ${props.position}%,
      ${getColorAlias('interactiveSecondary')} ${props.position}%,
      ${getColorAlias('interactiveSecondary')} 100%
    );
  `}
`;
const ThumbWrapper = styled.div `
  cursor: pointer;
  position: absolute;
  left: ${(props) => props.position ? `calc(${props.position}% - 10px)` : '0%'};
  top: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
`;
const ThumbValue = styled.span `
  ${getFontSize('size14')};
  white-space: nowrap;
  position: absolute;
  top: 18px;
  color: ${getColorAlias('containerInverse')};
`;
const Thumb = styled.span `
  width: 16px;
  height: 16px;
  background: ${getColorAlias('interactiveLight')};
  border-radius: ${(props) => props.theme.radius.roundedE};
  box-shadow: ${(props) => props.theme.elevation.e2};
  top: 11px;
`;
const MinMaxValuesWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['onlyMax']),
}) `
  ${getFontSize('size14')}
  color: ${getColorAlias('contentDisabled')};
  display: flex;
  align-items: center;
  justify-content: ${(props) => props.onlyMax ? 'space-between' : 'flex-start'};
`;
const Col = styled.div `
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
`;
const TextWrapper = styled.div `
  display: flex;
  justify-content: space-between;
  margin-bottom: -8px;
`;
const Title = styled.span `
  ${getFontSize('size14')};
  font-weight: ${(props) => props.theme.font.weightBold};
  color: ${getColorAlias('containerInverse')};
`;
const SupportText = styled.span `
  ${getFontSize('size14')};
  display: flex;
  color: ${getColorAlias('contentDisabled')};
  align-items: flex-end;
`;

export { Col, Input, MinMaxValuesWrapper, SliderWrapper, SupportText, TextWrapper, Thumb, ThumbValue, ThumbWrapper, Title, Track, Wrapper };
