import {
  ChangeContext,
  NgxSliderModule,
  Options,
} from '@angular-slider/ngx-slider';
import { CommonModule } from '@angular/common';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  Output,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';

// Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// Enums
import { SliderTemplateEnum } from './enums/slider-template.enum';

@Component({
    selector: 'app-ca-ngx-slider',
    templateUrl: './ca-ngx-slider.component.html',
    styleUrls: ['./ca-ngx-slider.component.scss'],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [
        // modules
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        NgxSliderModule,
    ]
})
export class CaNgxSliderComponent implements AfterViewInit {
  @Input() sliderTemplate: string = SliderTemplateEnum.COMMISSION;
  @Input() sliderName!: string;
  @Input() sliderOptions!: Options;
  @Input() startedValue: number = 50;
  @Input() customClass!: string;
  @Input() minValue: number = 0;
  @Input() maxValue: number = 5000;
  @Input() isDisabled: boolean = false;

  @Output() onUserValueChange: EventEmitter<ChangeContext | number> =
    new EventEmitter<ChangeContext | number>();
  @Output() onUserHighValueChange: EventEmitter<ChangeContext | number> =
    new EventEmitter<ChangeContext | number>();

  @ViewChild('slider') slider: any; //leave any for now

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.refreshSlider();
    }, 500);
  }

  public userChangeEnd(changes: ChangeContext): void {
    if (changes) {
      if (this.sliderTemplate === SliderTemplateEnum.RANGE_SLIDER)
        this.onUserValueChange.emit(changes);
      else this.onUserValueChange.emit(changes.value);
    }
  }

  public valueChange(event: number): void {
    if (event) this.onUserValueChange.emit(event);
  }

  public minValueChange(event: number): void {
    this.onUserValueChange.emit(event);
  }

  public highValueChange(event: number): void {
    if (event) this.onUserHighValueChange.emit(event);
  }

  public refreshSlider(): void {
    if (this.slider) this.slider.onResize();
  }
}