'use strict';
define(
    [
        'vent',
        'marionette',
        'Commands/CommandController',
        'Mixins/AsModelBoundView',
        'Mixins/AsValidatedView',
        'Mixins/CopyToClipboard'
    ], function (vent, Marionette, CommandController, AsModelBoundView, AsValidatedView) {
        var view = Marionette.ItemView.extend({
            template: 'Settings/General/GeneralViewTemplate',

            events: {
                'change .x-auth'             : '_setAuthOptionsVisibility',
                'change .x-ssl'              : '_setSslOptionsVisibility',
                'click .x-reset-api-key'     : '_resetApiKey',
                'change .x-update-mechanism' : '_setScriptGroupVisibility'
            },

            ui: {
                authToggle      : '.x-auth',
                authOptions     : '.x-auth-options',
                sslToggle       : '.x-ssl',
                sslOptions      : '.x-ssl-options',
                resetApiKey     : '.x-reset-api-key',
                copyApiKey      : '.x-copy-api-key',
                apiKeyInput     : '.x-api-key',
                updateMechanism : '.x-update-mechanism',
                scriptGroup     : '.x-script-group'
            },

            initialize: function () {
                this.listenTo(vent, vent.Events.CommandComplete, this._commandComplete);
            },

            onRender: function(){
                if(!this.ui.authToggle.prop('checked')){
                    this.ui.authOptions.hide();
                }

                if(!this.ui.sslToggle.prop('checked')){
                    this.ui.sslOptions.hide();
                }

                if (!this._showScriptGroup()) {
                    this.ui.scriptGroup.hide();
                }

                CommandController.bindToCommand({
                    element: this.ui.resetApiKey,
                    command: {
                        name: 'resetApiKey'
                    }
                });
            },

            onShow: function () {
                this.ui.copyApiKey.copyToClipboard(this.ui.apiKeyInput);
            },

            _setAuthOptionsVisibility: function () {

                var showAuthOptions = this.ui.authToggle.prop('checked');

                if (showAuthOptions) {
                    this.ui.authOptions.slideDown();
                }

                else {
                    this.ui.authOptions.slideUp();
                }
            },

            _setSslOptionsVisibility: function () {

                var showSslOptions = this.ui.sslToggle.prop('checked');

                if (showSslOptions) {
                    this.ui.sslOptions.slideDown();
                }

                else {
                    this.ui.sslOptions.slideUp();
                }
            },

            _resetApiKey: function () {
                if (window.confirm('Reset API Key?')) {
                    CommandController.Execute('resetApiKey', {
                        name : 'resetApiKey'
                    });
                }
            },

            _commandComplete: function (options) {
                if (options.command.get('name') === 'resetapikey') {
                    this.model.fetch();
                }
            },

            _setScriptGroupVisibility: function () {

                if (this._showScriptGroup()) {
                    this.ui.scriptGroup.slideDown();
                }

                else {
                    this.ui.scriptGroup.slideUp();
                }
            },

            _showScriptGroup: function () {
                return this.ui.updateMechanism.val() === 'script';
            }
        });

        AsModelBoundView.call(view);
        AsValidatedView.call(view);

        return view;
    });