/**
 *
 * MIXINS
 *
 */

var componentsFuncs = {
    mixins: [mainFuncs],
    methods: {
        blockSaveData: function (code, callback) {
            this.state.active = false;
            this.ajaxReq('settings_'+code+'_save', 'post', {
                fields: this.fields,
            }, (response) => {
                // Blocks update
                this.$emit('block_update', code);
            }, (response) => {
            }, (response) => {
                // Callback success
                if (typeof callback === 'function') {
                    callback(response);
                }
            });
        },
    },
    mounted() {
        // Blocks update (ordering data)
        this.$root.$on('blocks_update_before', (calling_block) => {
            this.state.active = false;
        });
        // Blocks update (data is received)
        this.$root.$on('blocks_update', (data, calling_block) => {
            this.state = data.blocks[this.code].state;
            this.fields = data.blocks[this.code].fields;
            this.info = data.blocks[this.code].info;
        });
    },
};


/**
 *
 * COMPONENTS
 *
 */

// Connection settings
Vue.component('settings-connect', {
    props: [],
    data: function () {
        return {
            code: 'connect',
            state: {
                display: true,
                active: false,
            },
            fields: {
                site: '',
                portal: '',
                app_id: '',
                secret: '',
                auth_link: '',
            },
            info: {
                has_cred: false,
            },
        }
    },
    computed: {
        app_link: function () {
            return this.fields.site + '/bitrix/sprod_dsync_auth.php'
        },
        app_create_link: function () {
            let link = ''
            if (this.fields.portal && (!this.fields.app_id || !this.fields.secret)) {
                link = this.fields.portal + '/devops/section/standard/'
            }
            return link
        },
    },
    methods: {
        credReset: function (code) {
            if (confirm(this.$t("page.SP_DS_SETTINGS_RESET_CONN_WARNING"))) {
                this.state.active = false;
                this.ajaxReq('settings_' + code + '_reset', 'post', {
                    id: this.$profile_id,
                }, (response) => {
                    // Blocks update
                    this.$emit('block_update', code);
                }, (response) => {
                }, (response) => {
                    // Callback success
                    if (typeof callback === 'function') {
                        callback(response);
                    }
                });
            }
        },
    },
    watch: {
        'fields.site': function (new_value) {
            this.fields.site = new_value.replace(/\/$/ig, "");
        },
        'fields.portal': function (new_value) {
            this.fields.portal = new_value.replace(/\/$/ig, "");
        },
    },
    template: `
<div v-bind:class="{ \'block-disabled\': state.active == false }" v-if="state.display">
    <div class="card">
        <div class="card-body">
            <h4 class="header-title">{{ $t("page.SP_DS_SETTINGS_CONNECT_TITLE") }}</h4>
            <p class="sub-header">{{ $t("page.SP_DS_SETTINGS_CONNECT_SUBTITLE") }}</p>
            <div class="form-group mb-3">
                <label for="settings_site">{{ $t("page.SP_DS_SETTINGS_CONNECT_SITE") }}</label>
                    <input type="text" class="form-control" id="settings_site" placeholder="https://site.ru" v-model="fields.site">
                <b-tooltip target="settings_site" placement="bottom">{{ $t("page.SP_DS_SETTINGS_CONNECT_SITE_HINT") }}</b-tooltip>
            </div>
            <div class="form-group mb-3" v-if="fields.site">
                <label for="settings_portal">{{ $t("page.SP_DS_SETTINGS_CONNECT_PORTAL") }}</label>
                    <input type="text" class="form-control" id="settings_portal" placeholder="https://portal.bitrix24.ru" v-model="fields.portal">
                <b-tooltip target="settings_portal" placement="bottom">{{ $t("page.SP_DS_SETTINGS_CONNECT_PORTAL_HINT") }}</b-tooltip>
            </div>
            <div class="form-group mb-3" v-if="fields.site">
                <label for="settings_app_link">{{ $t("page.SP_DS_SETTINGS_CONNECT_APP_LINK") }}</label>
                <input type="text" id="settings_app_link" class="form-control" readonly :value="app_link">
                <b-tooltip target="settings_app_link" placement="bottom">{{ $t("page.SP_DS_SETTINGS_CONNECT_APP_LINK_HINT") }}</b-tooltip>
                <a class="btn btn-success mt-1" v-if="app_create_link" :href="app_create_link" target="_blank">{{ $t("page.SP_DS_SETTINGS_CONNECT_APP_CREATE_LINK") }}</a>
            </div>
            <div class="form-group mb-3" v-if="fields.site">
                <label for="settings_app_id">{{ $t("page.SP_DS_SETTINGS_CONNECT_APP_ID") }}</label>
                <input type="text" id="settings_app_id" class="form-control" v-model="fields.app_id">
            </div>
            <div class="form-group mb-3" v-if="fields.site">
                <label for="settings_secret">{{ $t("page.SP_DS_SETTINGS_CONNECT_SECRET") }}</label>
                <input type="text" id="settings_secret" class="form-control" v-model="fields.secret">
            </div>
            <!--<a class="btn btn-success mt-1" v-if="app_adit_link" :href="app_adit_link" target="_blank">Посмотреть приложение</a>-->
            <button class="btn btn-success" @click="blockSaveData(code)">
                {{ $t("page.SP_DS_SETTINGS_SAVE") }}
            </button>
            <button v-if="info.has_cred" class="btn btn-sm btn-light float-right" @click="credReset(code)" v-b-tooltip.hover :title="$t('page.SP_DS_SETTINGS_RESET_CONN_HINT')">
                {{ $t("page.SP_DS_SETTINGS_RESET_CONN") }}
            </button>
            <div class="alert alert-warning border-0 mt-3" role="alert" v-if="fields.auth_link">
                {{ $t("page.SP_DS_SETTINGS_CONNECT_AUTH_LINK") }}<br>
                <a target="_top" :href="fields.auth_link">{{fields.auth_link}}</a>
            </div>
        </div> <!-- end card-body -->
    </div> <!-- end card -->
    <div class="card">
        <div class="card-body">
            <p class="mb-0" v-html="$t('page.SP_DS_SETTINGS_CONNECT_STATUS_LINK')"></p>
        </div> <!-- end card-body -->
    </div> <!-- end card -->
</div>
`,
    mixins: [utilFuncs, componentsFuncs, mainFuncs],
});

// Synchronization active
Vue.component('settings-active', {
    props: [],
    data: function () {
        return {
            code: 'active',
            state: {
                display: true,
                active: false,
            },
            fields: {
                active: '',
            },
        }
    },
    template: `
<div v-bind:class="{ \'block-disabled\': state.active == false }" v-if="state.display">
    <div class="alert alert-info">
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="settings_active" @change="blockSaveData(code)" v-model="fields.active" value="Y">
            <label class="custom-control-label" for="settings_active">{{ $t("page.SP_DS_SETTINGS_ACTIVE_LABEL") }}</label>
        </div>
    </div>
</div>
`,
    mixins: [utilFuncs, componentsFuncs],
});

// Mode of synchronization
Vue.component('settings-sync', {
    props: [],
    data: function () {
        return {
            code: 'sync',
            state: {
                display: true,
                active: false,
            },
            fields: {
                events_mode: '',
                sync_excludes: '',
                direction: 'stoc',
            },
        }
    },
    template: `
<div class="card" v-bind:class="{ \'block-disabled\': state.active == false }" v-if="state.display">
    <div class="card-body">
        <h4 class="header-title">{{ $t("page.SP_DS_SETTINGS_SYNC_TITLE") }}</h4>
        <p class="sub-header">{{ $t("page.SP_DS_SETTINGS_SYNC_SUBTITLE") }}</p>
        <!--<div class="form-group mb-3">
            <label for="example-date">{{ $t("page.SP_DS_SETTINGS_SYNC_DIRECTION") }}</label>
            <div class="radio radio-info mb-2">
                <input type="radio" v-model="fields.direction" id="sync_direction_stoc" value="stoc">
                <label for="sync_direction_stoc">{{ $t("page.SP_DS_SETTINGS_SYNC_DIRECTION_STOC") }}</label>
            </div>
            <div class="radio radio-info mb-2">
                <input type="radio" v-model="fields.direction" id="sync_direction_full" value="full">
                <label for="sync_direction_full">{{ $t("page.SP_DS_SETTINGS_SYNC_DIRECTION_FULL") }}</label>
            </div>
        </div>-->
        <div class="form-group mb-3">
            <label for="settings_events_mode">{{ $t("page.SP_DS_SETTINGS_SYNC_EVENTS_MODE") }}</label>
            <b-tooltip target="settings_events_mode" placement="bottom">{{ $t("page.SP_DS_SETTINGS_SYNC_EVENTS_MODE_HINT") }}</b-tooltip>
            <b-form-select v-model="fields.events_mode" id="settings_events_mode">
                <option value="">{{ $t("page.SP_DS_SETTINGS_SYNC_EVENTS_MODE_DEFAULT") }}</option>
                <option value="by_user">{{ $t("page.SP_DS_SETTINGS_SYNC_EVENTS_MODE_BYUSER") }}</option>
                <option value="disabled">{{ $t("page.SP_DS_SETTINGS_SYNC_EVENTS_MODE_DISABLED") }}</option>
            </b-form-select>
        </div>
        <div v-if="fields.events_mode != 'disabled'" class="form-group mb-3">
            <label for="settings_sync_excludes">{{ $t("page.SP_DS_SETTINGS_SYNC_EXCLUDES") }}</label>
            <b-tooltip target="settings_sync_excludes" placement="bottom">{{ $t("page.SP_DS_SETTINGS_SYNC_EXCLUDES_HINT") }}</b-tooltip>
            <b-form-input id="settings_sync_excludes" v-model="fields.sync_excludes"></b-form-input>
        </div>
        <button class="btn btn-success" @click="blockSaveData(code)">
            {{ $t("page.SP_DS_SETTINGS_SAVE") }}
        </button>
    </div>
</div>
`,
    mixins: [utilFuncs, componentsFuncs],
});


/**
 *
 * VUE APP
 *
 */

const i18n = new VueI18n({
    locale: 'ru',
    messages,
});

var app = new Vue({
    el: '#app',
    i18n,
    mixins: [utilFuncs, mainFuncs],
    data: {
        main_error: '',
    },
    methods: {
        // Blocks update
        updateBlocks: function (calling_block) {
            // Blocks update
            this.$emit('blocks_update_before', calling_block);
            this.ajaxReq('settings_get', 'get', {
                id: this.$profile_id,
            }, (response) => {
                this.$emit('blocks_update', response.data, calling_block);
            }, (response) => {
            }, (response) => {
                // Callback success
                if (typeof callback === 'function') {
                    callback(response);
                }
            });
        },
    },
    mounted() {
        this.updateBlocks();
    },
});