import {Component, EventEmitter, Input, Output} from '@angular/core';

@Component({
  selector: 'app-slider-range',
  templateUrl: './slider-range.component.html',
  styleUrls: ['./slider-range.component.scss']
})
export class SliderRangeComponent {
  @Input() value: number = 10;
  @Input() max: number = 300;

  @Output() valueChange = new EventEmitter<number>();

  constructor() {}


  onSliderChange(event: any) {
    this.value = event.target.value;
    this.valueChange.emit(this.value);
  }

  onSliderChangeBackground() {
    let valPercent = (this.value / this.max) * 100;

    // Adjust valPercent based on your conditions
    switch (true) {
      case (valPercent > 10 && valPercent <= 30):
        valPercent -= 0.5;
        break;
      case (valPercent > 30 && valPercent <= 50):
        valPercent -= 1;
        break;
      case (valPercent > 50 && valPercent <= 70):
        valPercent -= 1.5;
        break;
      case (valPercent > 70 && valPercent <= 90):
        valPercent -= 2;
        break;
      case (valPercent > 90 && valPercent <= 100):
        valPercent -= 2.3;
        break;
      default:
        break;
    }

    // Return CSS object with background style
    return {
      'background': `linear-gradient(to right, #ff7723 ${valPercent}%, transparent ${valPercent}%)`
    };
  }

  increaseVolume() {
    if (this.value < this.max) {
      this.value += 10;
      this.valueChange.emit(this.value);
    }
  }

  decreaseVolume() {
    if (this.value > 0) {
      this.value -= 10;
      this.valueChange.emit(this.value);
    }
  }
}
