import styled, {
  css,
  FlattenInterpolation,
  ThemeProps,
  DefaultTheme,
} from 'styled-components';

export const CommonSliderTrack = css`
  box-sizing: border-box;
  width: 100%;
  height: ${({ theme }) => theme.sizes.slider.trackHeight};
  border-radius: ${({ theme }) => theme.radii.slider.default};
`;

export const CommonSliderThumb = css`
  box-sizing: border-box;
  border: ${({ theme }) => theme.borderWidths.slider.thumb} solid
    ${({ theme }) => theme.colors.slider.thumbBorder};
  height: ${({ theme }) => theme.sizes.slider.thumb};
  width: ${({ theme }) => theme.sizes.slider.thumb};
  border-radius: 50%;
  background: ${({ theme }) => theme.colors.slider.thumbBackground};
  cursor: pointer;
`;

export const CommonThumbBoxShadow = css`
  box-shadow: ${({ theme }) => theme.shadows.slider.thumb};
`;

export const CommonTooltipAnimation = css`
  transition: all 0.2s ease-in-out;
`;

export const SliderRail = styled.div`
  background: ${({ theme }) => theme.colors.slider.background};
  border-radius: ${({ theme }) => theme.radii.slider.default};
  height: ${({ theme }) => theme.sizes.slider.trackHeight};
  width: 100%;
  position: absolute;
  left: 0px;
  top: ${({ theme }) => theme.space.slider.trackOffsetTop};
  margin: 0;
  padding: 0;
`;

export const SliderTrack = styled.div`
  background: ${({ theme }) => theme.colors.slider.track};
  border-radius: ${({ theme }) => theme.radii.slider.default};
  height: ${({ theme }) => theme.sizes.slider.trackHeight};

  position: absolute;
  left: 0px;
  top: ${({ theme }) => theme.space.slider.trackOffsetTop};
  margin: 0;
  padding: 0;
`;

export const SliderTooltip = styled.div<{ alwaysShowTooltip: boolean }>`
  display: ${(props): string => (props.alwaysShowTooltip ? 'initial' : 'none')};
  position: absolute;
  margin: 0;
  padding: 0;

  line-height: ${({ theme }) => theme.lineHeights.tooltip.default};
  min-width: ${({ theme }) => theme.sizes.slider.tooltipMinWidth};

  background: ${({ theme }) => theme.colors.tooltip.background};
  color: white;
  border-radius: ${({ theme }) => theme.radii.tooltip.default};

  white-space: nowrap;
  font-size: ${({ theme }) => theme.fontSizes.tooltip.default};
  text-align: center;

  padding: ${({ theme }) => theme.space.tooltip.wrapperPadding};

  user-select: none;
  transform: translate(-50%, -150%);
  left: ${({ theme }) => theme.space.slider.tooltipOffsetLeft};
  ${CommonTooltipAnimation};

  &:before {
    content: '';
    position: absolute;
    top: ${({ theme }) => theme.space.slider.tooltipPointerOffsetTop};
    left: 50%;
    border: ${({ theme }) => theme.sizes.tooltip.arrow} solid
      ${({ theme }) => theme.colors.tooltip.background};
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
    transform: translateX(-50%);
  }
`;

export const SliderThumb = styled.div`
  box-sizing: border-box;
  border-radius: 50%;
  background: ${({ theme }) => theme.colors.slider.thumbBackground};
  height: ${({ theme }) => theme.sizes.slider.thumb};
  width: ${({ theme }) => theme.sizes.slider.thumb};
  border: ${({ theme }) => theme.borderWidths.slider.thumb} solid
    ${({ theme }) => theme.colors.slider.thumbBorder};
  outline: none;
  box-shadow: none;

  position: absolute;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;

  &:focus,
  &:hover {
    ${CommonThumbBoxShadow};
    ${SliderTooltip} {
      display: initial;
    }
  }
`;

const DisabledSlider = css`
  pointer-events: none;
  ${SliderRail},
  ${SliderTrack},
  ${SliderThumb} {
    cursor: not-allowed;
  }

  ${SliderTrack} {
    background: ${({ theme }) => theme.colors.slider.disabled};
  }

  ${SliderThumb} {
    border-color: ${({ theme }) => theme.colors.slider.disabled};
  }
`;

const EnabledSlider = css`
  pointer-events: initial;

  ${SliderRail},
  ${SliderTrack},
  ${SliderThumb} {
    cursor: pointer;
  }
`;

export const SliderContainer = styled.div<{ disabled: boolean }>`
  height: ${({ theme }) => theme.sizes.slider.inputHeight};
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0;

  ${(props): FlattenInterpolation<ThemeProps<DefaultTheme>> =>
    props.disabled ? DisabledSlider : EnabledSlider};
`;