import { __assign } from "tslib";
import { withThemeableProps } from '../../useThemeable';
import { classNamesFunction, getId } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { Label } from '../Label';
var getClassNames = classNamesFunction();
export var ToggleBase = Vue.extend({
    name: 'ToggleBase',
    model: {
        prop: 'checked',
        event: 'input',
    },
    props: __assign(__assign({}, withThemeableProps()), { checked: { type: Boolean, default: false }, label: { type: String, default: '' }, defaultChecked: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, inlineLabel: { type: Boolean, default: false }, onText: { type: String, default: null }, offText: { type: String, default: null } }),
    data: function () {
        return {
            internalChecked: this.defaultChecked || this.checked,
        };
    },
    computed: {
        classNames: function () {
            var _a = this, theme = _a.theme, className = _a.className, disabled = _a.disabled, internalChecked = _a.internalChecked, inlineLabel = _a.inlineLabel, onText = _a.onText, offText = _a.offText;
            return getClassNames(this.styles, {
                theme: theme,
                className: className,
                disabled: disabled,
                checked: internalChecked,
                inlineLabel: inlineLabel,
                onOffMissing: !onText && !offText,
            });
        },
        uid: function () {
            return getId();
        },
    },
    watch: {
        checked: function (value) {
            this.internalChecked = value;
        },
    },
    methods: {
        focus: function () {
            var _a;
            (_a = this.$refs.toggleButton) === null || _a === void 0 ? void 0 : _a.focus();
        },
        onClick: function () {
            if (this.disabled)
                return;
            this.internalChecked = !this.internalChecked;
            this.$emit('input', this.internalChecked);
        },
    },
    render: function (h) {
        var _a = this, classNames = _a.classNames, internalChecked = _a.internalChecked, disabled = _a.disabled, label = _a.label, onText = _a.onText, offText = _a.offText;
        var id = "Toggle".concat(this.uid);
        var $label = h(Label, {
            class: classNames.label,
            attrs: {
                for: id,
            },
        }, [
            this.$scopedSlots.label
                ? this.$scopedSlots.label({ checked: internalChecked, disabled: disabled, label: label })
                : label,
        ]);
        var $pill = h('button', {
            ref: 'toggleButton',
            class: classNames.pill,
            attrs: {
                id: id,
            },
            on: {
                click: this.onClick,
            },
        }, [
            h('div', { class: classNames.thumb }),
        ]);
        var $stateLabel = ((internalChecked && onText) || (!internalChecked && offText)) && h(Label, {
            class: classNames.text,
            attrs: {
                for: id,
            },
        }, internalChecked ? onText : offText);
        var $container = h('div', { class: classNames.container }, [
            $pill,
            $stateLabel,
        ]);
        return h('div', { class: classNames.root }, [
            $label,
            $container,
        ]);
    },
});
//# sourceMappingURL=Toggle.base.js.map