const sliderContainer = document.querySelector('.slider-container');
const slider = sliderContainer.querySelector('.slider');
const sliderThumb = sliderContainer.querySelector('.slider-thumb');
const sliderBlue = sliderContainer.querySelector('.slider-blue');
const sliderRed = sliderContainer.querySelector('.slider-red');
const sliderLabelMinValue = sliderContainer.querySelector('.slider-label-min .slider-label-value');
const sliderLabelMinVariable = sliderContainer.querySelector('.slider-label-min .slider-label-variable');
const sliderLabelMaxValue = sliderContainer.querySelector('.slider-label-max .slider-label-value');
const sliderLabelMaxVariable = sliderContainer.querySelector('.slider-label-max .slider-label-variable');
let isStart=false

let min = 00;
let max = 100;
let current = 00;
let variable = 'Field Value';
let income = 100;
let price = 10;
let step = 2;
let field=0

slider.addEventListener('click', function(event) {
  sliderThumb.style.display="flex"
  const sliderWidth = slider.offsetWidth;
  const sliderLeft = slider.getBoundingClientRect().left;
  const clickX = event.clientX - sliderLeft;
  current = Math.round(clickX / sliderWidth * (max - min));
  isStart=true
  setSliderPosition();
})

function setSliderPosition() {
 if(isStart){
  sliderThumb.style.display="flex"

  let thumbPosition = (current - min) / (max - min) * 100;
  console.log(thumbPosition);
  if(thumbPosition<0){
    thumbPosition=0

  }
  sliderThumb.style.left = thumbPosition + '%';

  const blueWidth = thumbPosition + '%';
  sliderBlue.style.width = blueWidth;

  let redWidth =((income - current) / price).toFixed(0) + '%';
  field=redWidth.split('%')[0]

  document.getElementById('value').innerText="field : "+field;

  sliderRed.style.width = (redWidth   ) + '% !important';
  
  

  sliderBlue.setAttribute('aria-valuenow',min);
  sliderRed.setAttribute('aria-valuenow', max);
//   sliderBlue.style.width = `${blueWidth}%`;
//   sliderRed.style.width = `${redWidth}% !important`;
  sliderBlue.setAttribute('aria-valuemin', min);
  sliderRed.setAttribute('aria-valuemin', min);

  sliderBlue.setAttribute('aria-valuemax', max);
  sliderRed.setAttribute('aria-valuemax', max);
  

  // sliderLabelMinValue.textContent = redWidth.split('%')[0];
  
  sliderLabelMinValue.textContent="Blue: " +((income - current)/price).toFixed(2);
  
  sliderLabelMaxValue.textContent = "Red: "+current.toFixed(2);
  

  document.getElementById('red').style.width=redWidth;
 }
}

// setSliderPosition();

sliderThumb.addEventListener('mousedown', function(event) {
  event.preventDefault();

  const startX = event.clientX;
  const startField = current;

  function onMouseMove(event) {
    const delta = (event.clientX - startX) / slider.offsetWidth * (max - min);
    current = Math.max(min, Math.min(startField + delta, max));
    
    setSliderPosition();
  }

  function onMouseUp(event) {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

sliderThumb.addEventListener('touchstart', function(event) {
  event.preventDefault();

  const startX = event.touches[0].clientX;
  const startField = current;

  function onTouchMove(event) {
    const delta = (event.touches[0].clientX - startX) / slider.offsetWidth * (max - min);
    current = Math.max(min, Math.min(startField + delta, max));
    setSliderPosition();
    
  }

  function onTouchEnd(event) {
    document.removeEventListener('touchmove', onTouchMove);
    document.removeEventListener('touchend', onTouchEnd);
  }

  document.addEventListener('touchmove', onTouchMove);
  document.addEventListener('touchend', onTouchEnd);
});