import {
    Directive,
    ElementRef,
    forwardRef,
    HostListener,
    Input,
    Renderer2,
} from '@angular/core';
import {
    ControlValueAccessor,
    NG_VALUE_ACCESSOR,
    NgControl,
} from '@angular/forms';

// ref: https://juristr.com/blog/2018/02/ng-true-value-directive/
@Directive({
    selector: 'input[type=checkbox][appTrueFalseValue]',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => TrueFalseValueDirective),
            multi: true,
        },
    ],
})
export class TrueFalseValueDirective implements ControlValueAccessor {
    @Input() trueValue = true;
    @Input() falseValue = false;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

    @HostListener('change', ['$event'])
    onHostChange(ev: any) {
        this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
    }

    writeValue(obj: any): void {
        if (obj === this.trueValue) {
            this.renderer.setProperty(this.elementRef.nativeElement, 'checked', true);
        } else {
            this.renderer.setProperty(this.elementRef.nativeElement, 'checked', false);
        }
    }

    registerOnChange(fn: any): void {
        this.propagateChange = fn;
    }

    registerOnTouched(fn: any): void { /* nothing */ }

    setDisabledState?(isDisabled: boolean): void { /* nothing */ }

    private propagateChange = (_: any) => { /* nothing */ };
}