import VueSelect from '/Components/Common/VueSelect.js?v=3.9'
import InputSearch from '/Components/Common/InputSearch.js?v=3.9'
import SearchPanel from '/Components/Common/SearchPanelWrapper.js?v=3.9'
import OperationsPanel from '/Components/Common/OperationsPanelWrapper.js?v=3.9'
import InputText from "/Components/Common/InputText.js?v=3.9"
import Pager from '/Components/Common/Pager.js?v=3.9'
import NoRecords from '/Components/Common/NoRecords.js?v=3.9'
import { getLabelText } from '/Components/Common/utils.js?v=3.9'
import Loading from "/Components/Common/Loading.js?v=3.9"

export default {
    props: {
        readOnly: { type: Boolean, required: true },
        vpsServerGroupsFilter: { type: Object, required: true },
    },
    components: {
        SearchPanel,
        OperationsPanel,
        VueSelect,
        InputSearch,
        InputText,
        NoRecords,
        Pager,
        Loading,
    },
    data() {
        return {
            isLoading: true,
            searchContainerDivClass: "col-md-3 col-sm-6 col-xs-12",
            records: [],
            serverGroups: this.vpsServerGroupsFilter,
            search: {
                selectedServerGroupFilter: -1,
                serverName: '',

                sortExpression: 'SDNServerName',
                sortDir: 'Asc'
            },
            showClearButton: false,
        }
    },
    methods: {
        serverGroupsChangeHandler: function (obj) {

            this.search.selectedServerGroupFilter = obj.selectedValue;

        },
        inputSearchChangeHandler: function (obj) {
            this.search[obj.fieldName] = obj.searchValue;
            this.showClearButton = obj.submit;

            if (obj.submit == true)
                this.doSearch();
        },
        getLabelText,
        sortBy: function (exp) {

            if (this.search.sortExpression != exp) {
                this.search.sortExpression = exp;
                this.search.sortDir = "Asc";
            }
            else
                this.search.sortDir = this.search.sortDir == "Asc" ? "Desc" : "Asc";

            this.doSearch();
        },
        listRecords: async function () {

            var vm = this;
            vm.isLoading = true;
            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            await fetch("/PCC/VPS/SDN/SDN.aspx/GetSDNServers", postRequest)
                .then(response => response.json()).then((data) => {

                    vm.records = JSON.parse(data.d);
                });
            vm.isLoading = false;
        },
        doClearSearch: async function () {
            this.search.selectedServerGroupFilter = '-1';
            this.search.serverName = '';

            updateSelectInterface();    //Required to update SOL control in case of html select.
            this.doSearch();
        },
        doSearch: function () {
            clearAllMsgs();
            var vm = this;
            this.listRecords().catch(function (e) {
                vm.records = [];
                vm.isLoading = false;
                displayErrorMsg(e);
            });
        },        
        confirmRemove: function (e) {
            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            let sId = e.target.dataset.id;
            let Name = e.target.dataset.name;

            if (confirm(this.getLabelText('CBE001').replace('%operand%', Name)))
                this.removeRecord(sId, Name);
        },
        removeRecord: function (sId, name) {

            var vm = this;

            let postRequest = { ...fetchPost };
            let params = {
                'SDNServerId': sId,
                'SDNServerName': name
            };
            postRequest.body = JSON.stringify(params);

            fetch("/PCC/VPS/SDN/SDN.aspx/RemoveSDNServer", postRequest)
                .then(response => response.json()).then((data) => {

                    vm.doSearch();
                    displaySuccessMsg(data.d);
                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },         
        manageInterfaces: function (e) {

            this.isLoading = true;
            var vm = this;

            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            let sId = e.target.dataset.id;
            window.location.href = '/PCC/VPS/SDN/Interfaces.aspx?Id=' + sId;
        },
        
    },
    created: async function () {
        
        var vm = this;

        await this.listRecords().catch(function (e) {
            vm.records = [];
            vm.isLoading = false;
            displayErrorMsg(e);
        });

    },
    updated: function () {
        //updateSelectInterface();
        //AdminBSBThemeChanges();
    },
    template: '#vpssdnservers-template',
}
