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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'toggle-component',
    styleUrls: [
        './toggle.component.scss',
    ],
    templateUrl: 'toggle.component.template.pug',
})
export class ToggleComponent implements AfterViewInit {
    @Input()
    public isOn: boolean;

    @Input()
    public disabled: boolean = false;

    @Output()
    public onToggle = new EventEmitter<boolean>();

    @Output()
    public onDisabledClick = new EventEmitter<boolean>();

    public isAnimatable = false;

    public ngAfterViewInit() {
        this.isAnimatable = true;
    }

    public toggleButton() {
        if (!this.disabled) {
            this.isOn = !this.isOn;
            this.onToggle.emit(this.isOn);
        } else {
            this.onDisabledClick.emit(this.isOn);
        }
    }
}