import toPlaceholder from '.././utils'

const StyleRangeList = styled.div `
  display: flex;
  flex-direction: row;
  transition: 0.01s ease-in-out;
  * {
    transition: 0.01s ease-in-out;
  }
`
const StyledWrap = styled.div `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content; center;
  position: relative;
  /* put it on gpu layer */
  transform: translateZ(0, 0, 0);
  /* on gpu layer, hide the invisible 3d sides */
  backface-visibility: hidden;
`
const StyledRange = styled.input.attrs({ type: 'range' }) `
  -webkit-appearance: none;
  margin: 0;
  ${props => props.reverse && styled.css `
    /* flip it */
    transform: scaleX(-1);
    z-index: 2;
    /* transform reverse puts 2px off */
    margin-right: -2px;
  `}
  &::-webkit-media-slider-container {
    height: 1rem;
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #25a9e0;
    height: 1rem;
    width: 1rem;
  }
  &::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: #efefef;
    height: 1rem;
    width: 1rem;
  }
`
const StyledOutput = styled.span `
  color: #272727;
`
const StyledThumb = styled.div `
  display: inline-flex;
  position: relative;
  /* height of self, height of thumb, offset by 1/2 of self */
  bottom: calc(-100% - -1rem);
  right: 0;
  left: 0.0625rem;
  top: 22px;
  width: 100%;
  height: 6px;
  background: url(" ${toPlaceholder() + ''} ");
  background-repeat: no-repeat;
  ${props => props && styled.css `
    background-position-x: ${(props.value || 0) + '%'};
  `}
  ${props => props.reverse && styled.css `
    transform: scaleX(-1);
    z-index: 4;
  `}
  &:before {
    content: '';
    display: inherit;
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: #25A9E0;
    pointer-events: none;
    margin: 0 auto;
    left: auto;
    /* 6px, 1 off */
    bottom: 5px;
    ${props => props && styled.css `
      /* width of svg 14px + */
      width: calc(${(props.value || 0) + '%'});
    `}
    ${props => props.reverse && styled.css `
      z-index: 3;
      /* follow the thumb being in reverse */
      left: -1rem;
      width: calc(${(props.value || 0) + '%'} + 1rem);
    `}
  }
`

export { StyledThumb, StyledOutput, StyledRange, StyleRangeList, StyledWrap }