import {Component, Inject, Input} from 'ng-forward';
import {DesignModeService} from './designMode.service';
@Component({
    selector: 'noosfero-design-toggler',
    templateUrl: 'app/admin/layout-edit/designModeToggler.html',
    inputs: ['knobLabel', 'onLabel', 'offLabel']
})
@Inject(DesignModeService, '$sce')
export class DesignModeTogglerComponent {

    @Input() iconClass: string = '';
    @Input() knobLabel: string = '';
    @Input() offLabel: string = '';
    @Input() onLabel: string = '';


    constructor(private designModeService: DesignModeService, private $sce: ng.ISCEService) {
    }

    get icon(): string {
        if (this.iconClass && this.iconClass.trim().length > 0 ) {
            return '<i class=\'design-toggle-icon ' + this.iconClass + '\'></i>';
        }
        else {
            return '';
        }
    }

    getKnobLabel(): string {
        return this.$sce.trustAsHtml(this.icon + this.knobLabel);
    }

    private _inDesignMode: boolean = false;

    get inDesignMode(): boolean {
        return this.designModeService.isInDesignMode();
    };

    set inDesignMode(value: boolean) {
        this.designModeService.setInDesignMode(value);
    };
}