import { CommonModule } from '@angular/common';
import {
    Component,
    EventEmitter,
    forwardRef,
    Input,
    Output,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

// interfaces
import { IRangeSliderConfig } from './interfaces';

// directives
import { RangeSliderDirective } from './directives';

@Component({
    selector: 'app-ca-range-slider',
    templateUrl: './ca-range-slider.component.html',
    styleUrls: ['./ca-range-slider.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CaRangeSliderComponent),
            multi: true,
        },
    ],
    imports: [
        // modules
        CommonModule,

        // directives
        RangeSliderDirective,
    ],
})
export class CaRangeSliderComponent implements ControlValueAccessor {
    @Input() rangeSliderConfig!: IRangeSliderConfig;
    @Input() isDisabled = false;

    @Output() rangeSliderChange = new EventEmitter<number>(); // helper if needed (value is handled via control value accessor)

    public value!: number;

    constructor() {}

    // control value accessor
    private onChange: (value: number) => void = () => {};

    private onTouched: () => void = () => {};

    public writeValue(value: number): void {
        this.value = value ?? this.rangeSliderConfig.min;
    }

    public registerOnChange(fn: (value: number) => void): void {
        this.onChange = fn;
    }

    public registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
    }

    // input change
    public onRangeSliderChange(event: Event): void {
        const input = event.target as HTMLInputElement;
        const value = input.valueAsNumber;

        this.value = value;

        this.onChange(value);
        this.onTouched();

        this.rangeSliderChange.emit(value);
    }
}