define([
    'arches',
    'knockout', 
    'underscore', 
    'viewmodels/widget',
    'templates/views/components/widgets/switch.htm',
    'bindings/key-events-click',
], function(arches, ko, _, WidgetViewModel, switchWidgetTemplate) {
    /**
    * knockout components namespace used in arches
    * @external "ko.components"
    * @see http://knockoutjs.com/documentation/component-binding.html
    */

    /**
    * registers a switch-widget component for use in forms
    * @function external:"ko.components".switch-widget
    * @param {object} params
    * @param {boolean} params.value - the value being managed
    * @param {object} params.config -
    * @param {string} params.config.label - label to use alongside the select input
    * @param {string} params.config.subtitle - subtitle to use alongside the select input
    * @param {string|true} [params.config.on=true] - the value to use for the "on" state of the switch
    * @param {string|false} [params.config.off=false] - the value to use for the "off" state of the switch
    */

    var SwitchWidget = function(params) {
        params.configKeys = ['subtitle', 'defaultValue'];
         
        WidgetViewModel.apply(this, [params]);
        const originalConfig = this.config();
        this.on = this.config().on || true;
        this.activeLanguage = arches.activeLanguage;
        this.off = this.config().off || false;
        this.null = this.config().null || null;
        this.localizedSubtitle = ko.observable(this.subtitle()[this.activeLanguage]);

        // chained observable to avoid issues with ko.mapping
        this.localizedSubtitle.subscribe((value) => {
            const val = this.subtitle();

            if(value != ""){
                val[this.activeLanguage] = value;
                this.subtitle(val);
            } else {
                delete val[this.activeLanguage];
                this.config(originalConfig);
            }

            params.card.get('widgets').valueHasMutated();
        });


        this.setvalue = this.config().setvalue || function(self, evt){
            if (ko.unwrap(self.disabled) === false) {
                if(self.value() === self.on){
                    self.value(self.null);
                }else if (self.value() === self.null) {
                    self.value(self.off);
                }else if (self.value() === self.off) {
                    self.value(self.on);
                }
            }
        };

        this.getvalue = this.config().getvalue || ko.computed(function(){
            var result = null;
            if (this.value() === this.on) {
                result = true;
            } else if (this.value() === false) {
                result = false;
            }
            return result;
        }, this);

        this.getariavalue = ko.computed(function(){
            var result = null;
            if (this.getvalue() === null) {
                result = "mixed";
            } else {
                result = this.getvalue();
            }
            return result;
        }, this);

        this.setdefault = this.config().setdefault || function(self){
            if(self.defaultValue() === self.on){
                self.defaultValue(self.null);
            }else if(self.defaultValue() === self.null){
                self.defaultValue(self.off);
            }else if(self.defaultValue() === self.off){
                self.defaultValue(self.on);
            }
        };

        this.getdefault = this.config().getdefault || ko.computed(function(){
            var result = null;
            if (this.defaultValue() === this.on) {
                result = true;
            } else if (this.defaultValue() === false) {
                result = false;
            }
            return result;
        }, this);

        this.getariadefault = ko.computed(function(){
            var result = null;
            if (this.getdefault() === null) {
                result = "mixed";
            } else {
                result = this.getdefault();
            }
            return result;
        }, this);

        var defaultValue = ko.unwrap(this.defaultValue);
        if (this.value() === null && this.defaultValue() !== null) {
            this.value(this.defaultValue());
        }
        if (this.tile && this.tile.tileid == "" && defaultValue != null && defaultValue != "") {
            this.value(defaultValue);
        }
        this.disposables.push(this.getvalue);
        this.disposables.push(this.setdefault);
        this.disposables.push(this.getdefault);
    };

    return ko.components.register('switch-widget', {
        viewModel: SwitchWidget,
        template: switchWidgetTemplate,
    });
});
