import {Component, Input, OnInit} from '@angular/core';
import {toggle} from '../../animations/toggle';
import {toggleIn} from '../../animations/toggleIn';
import {fadeIn} from '../../animations/fade-in';

@Component({
    selector: 'v-switch',
    template: `
        <div *ngIf="!loading" class="switch" [ngClass]="{'disabled': disabled}" [@toggle]="outer">
            <div [@toggleIn]="inner" class="inlineSwitch"></div>
        </div>
        <div *ngIf="loading" class="loading">
            <div></div>
            <div></div>
            <div></div>
        </div>`,
    styleUrls: ['./switch.component.scss'],
    animations: [toggle, toggleIn, fadeIn]
})
export class SwitchComponent implements OnInit {

    constructor() {
    }

    @Input()
    get value(): any {
        return this.v;
    }
    set value(v: any) {
        this.changeValue(v);
    }
    outer = 'off';
    inner = 'off';
    @Input() loading = false;
    v;
    @Input() disabled = false;

    ngOnInit() {
    }

    changeValue(v) {
        if (v) {
            this.inner = 'on';
            setTimeout(() => {
                this.outer = 'on';
            }, 250);
        } else {
            this.inner = 'off';
            setTimeout(() => {
                this.outer = 'off';
            }, 250);
        }
    }
}
