import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@polymer/paper-toggle-button/paper-toggle-button.js';
import '@polymer/paper-spinner/paper-spinner.js';
import '@polymer/paper-tooltip/paper-tooltip.js';

export class RhodecodeToggle extends PolymerElement {

    static get is() {
        return 'rhodecode-toggle';
    }

    static get template() {
        return html`
        <style include="shared-styles">
            .rc-toggle {
                float: left;
                position: relative;
            }
    
            .rc-toggle paper-spinner {
                position: absolute;
                top: 0;
                left: -30px;
                width: 20px;
                height: 20px;
            }
        </style>
        <div class="rc-toggle">
            <paper-toggle-button checked={{checked}}>[[labelStatus(checked)]]
            </paper-toggle-button>
            <paper-tooltip>[[tooltipText]]</paper-tooltip>
            <template is="dom-if" if="[[shouldShow(noSpinner)]]">
                <paper-spinner active=[[active]]></paper-spinner>
            </template>
        </div>
    `;
    }

    static get properties() {
        return {
            noSpinner: {type: Boolean, value: false, reflectToAttribute: true},
            tooltipText: {type: String, value: "Click to toggle", reflectToAttribute: true},
            checked: {type: Boolean, value: false, reflectToAttribute: true},
            active: {type: Boolean, value: false, reflectToAttribute: true, notify: true}
        }
    }

    shouldShow() {
        return !this.noSpinner
    }

    labelStatus(isActive) {
        return this.checked ? 'Enabled' : "Disabled"
    }
}

customElements.define(RhodecodeToggle.is, RhodecodeToggle);