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

const rangeSliderSteps = styled.css`
  content: '';
  position: absolute;
  height: 2px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #cbcbcb;
  z-index: 3;
`

const MaxValue = styled.withComponent(Label).attrs({
  'data-qa': 'qa-maximum-price',
})`
  text-transform: capitalize;
`
const MinValue = styled.withComponent(Label).attrs({
  'data-qa': 'qa-minimum-price',
})`
  text-transform: capitalize;
`
const FlexSpacing = styled.div`
  display: flex;
  justify-content: space-between;
  order: 1;
`
const StyledInput = styled.input`
  position: absolute;
  border: none;
  border-radius: 14px;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  outline: none;
  height: 2px;
  margin: auto;
  padding: 0;
`
const StyledDataListBullets = styled.span`
  color: #cbcbcb;
  width: rem(3);
  height: rem(3);
  background: #cbcbcb;
  border-radius: 50%;
`
const StyledDataList = styled.div`
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 rem(6);
  margin: rem(12) 0;
`
const SliderWrapper = styled.div`
  order: 0;
`
const InputWrapper = styled.div.attrs({
  'data-qa': 'qa-price-slider',
})`
  &:before {
    ${rangeSliderSteps};
    width: ${props => props.state.minWidth}%;
    left: 0;
  }

  &:after {
    ${rangeSliderSteps};
    width: ${props => props.state.maxWidth}%;
    right: 0;
  }

  position: relative;
  height: rem(20);
  input[type='range'],
  input[type='range']::-webkit-slider-runnable-track,
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: none;
    cursor: pointer;
  }
  input[type='range']::-webkit-slider-runnable-track {
    width: 100%;
    height: rem(2);
    background: ${props => props.color};
  }

  input[type='range']:nth-child(2)::-webkit-slider-runnable-track {
    background: none;
  }

  input[type='range']::-webkit-slider-thumb {
    position: relative;
    height: 14px;
    width: 14px;
    margin-top: -6px;
    background: ${props => props.color};
    border: 0;
    border-radius: 25px;
    z-index: 4;
  }

  input[type='range']:nth-child(1)::-webkit-slider-thumb {
    z-index: 4;
  }
`
const StyledMinValueInput = styled.withComponent(StyledInput)``
const StyledMaxValueInput = styled.withComponent(StyledInput)``

const Wrapper = styled.section.attrs({
  dataQa: 'qa-price-slider-container',
})`
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
`

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