import { Directive, OnChanges, SimpleChanges, SimpleChange, ElementRef, Input } from '@angular/core';

/**
 * Adds [attr.disabled] when input evaluates to true,
 * otherwhise remvoes the disabled tag
 */

@Directive({
    selector: '[fbDisabled]'
})
export class FbDisabledDirective implements OnChanges {
    @Input()
    fbDisabled: boolean;

    private readonly element: HTMLElement;

    constructor( private readonly elementRef: ElementRef ) {
        this.element = this.elementRef.nativeElement;
    }

    ngOnChanges(changes: SimpleChanges): void {
        const disableChange: SimpleChange = changes.fbDisabled;

        if (disableChange) {
            if (disableChange.currentValue) {
                this.element.setAttribute('disabled', '');
            } else {
                this.element.removeAttribute('disabled');
            }
        }
    }
}