import { styled } from 'styleh-components'
import { Label } from 'atoms/Text'
import { RangeSliderAttributeProps } from './typings'

const rangeWidth = 300

function selectedColor(props: RangeSliderAttributeProps) {
  const list = []
  const fillRange =
    (rangeWidth / (props.max / props.step)) *
    (props.state.selectedValue / props.step)

  for (let i = 0; i < fillRange; i++) {
    const divider = i === fillRange - 1 ? ' ' : ','
    const shadow = i + 'px 0 0 -5px #218cd3' + divider
    list.push(shadow)
  }
  return list
}

const MaxValue = styled.withComponent(Label)`
  text-transform: capitalize;
`
const MinValue = styled.withComponent(Label)`
  text-transform: capitalize;
`
const FlexSpacing = styled.div`
  display: flex;
  justify-content: space-between;
`
const StyledInput = styled.input`
  position: absolute;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  left: 0;
  top: 50px;
  width: 300px;
  outline: none;
  height: 20px;
  margin: 0;
  padding: 0;

  &::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 14px;
  }
`
const InputWrapper = styled.div``
const StyledMinValueInput = styled.withComponent(StyledInput)`
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, red, red) 100% 50%/100% 3px no-repeat
      transparent;
  }

  &::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    height: 13px;
    width: 13px;
    background: #0199ff;
    border-radius: 100%;
    border: 0;
    top: 50%;
    margin-top: -8px;
    box-shadow: ${props => selectedColor(props)};
    transition: background-color 150ms;
  }
`
const StyledMaxValueInput = styled.withComponent(StyledInput)``

const Wrapper = styled.section`
  width: ${rangeWidth}px;
  position: relative;
`

export {
  MaxValue,
  MinValue,
  FlexSpacing,
  StyledInput,
  StyledMinValueInput,
  StyledMaxValueInput,
  InputWrapper,
  Wrapper,
}