import OperationsPanel from '/Components/Common/OperationsPanelWrapper.js?v=3.4'
import NoRecords from '/Components/Common/NoRecords.js?v=3.4'
import { getLabelText } from '/Components/Common/utils.js?v=3.4'
import Loading from "/Components/Common/Loading.js?v=3.4"

export default {
    components: {
        OperationsPanel,
        NoRecords,
        Loading
    },
    props: {
        //tabIndex: { type: String, required: true },
        readOnly: { type: Boolean, required: true },
        isResellerTemplate: { type: Boolean, required: true },
        isDetailMode: { type: Boolean, required: false, default: false },
    },
    data() {
        return {
            isLoading: true,
            templates: [],

            //***** START: Modal Popup *******
            parentContext: {},  //params to execute callback method related to current operation
            //***** END: Modal Popup *******
        }
    },
    methods: {
        getLabelText,
        listAccessTemplates: function () {

            var vm = this;
            //clearAllMsgs();
            vm.isLoading = true;

            let postRequest = { ...fetchPost };
            let params = {
                isResellerTemplate: vm.isResellerTemplate
            };

            postRequest.body = JSON.stringify(params);

            fetch("/PCC/Reseller/List.aspx/GetAccessTemplates", postRequest)
                .then(response => response.json()).then((data) => {
                    vm.templates = JSON.parse(data.d);

                }).catch(function (e) {
                    vm.templates = [];
                    vm.isLoading = false;
                    displayErrorMsg(e);
                });
            vm.isLoading = false;
        },
        confirmActionRemove: function (e) {

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

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

            let tId = e.target.dataset.id;

            this.parentContext = { tId: tId, op: "remove" };

            if (confirm(this.getLabelText('GN000200')))
                this.removeTemplate(this.parentContext);
        },
        removeTemplate: function (obj) {

            let postRequest = { ...fetchPost };
            var param = {
                'TemplateId': obj.tId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/PCC/Reseller/List.aspx/RemoveAccessTemplate", postRequest)
                .then(response => response.json()).then((data) => {

                    if (data.d == true || data.d == 'true') {
                        this.listAccessTemplates();
                        displaySuccessMsg(this.getLabelText('EGN0000011'));
                    }

                    //if (data.d.ResponseCode == "RedirectURL")
                    //    window.location.href = data.d.Value;

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        }
    },
    created: async function () {

        await this.listAccessTemplates();

    },
    template: `

        <div class="col-xs-12">
            <div class="card">
                <div class="body">
                    <div class="row">

                        <OperationsPanel v-if="!readOnly">
                            <a v-bind:href="'/RCC/Clients/AccessTemplates.aspx?rt=' + (isResellerTemplate ? '1' : '0') + (isDetailMode ? '&dt=1' : '&dt=0') + '&op=1'" class="btn btn-primary waves-effect btnAction">{{ getLabelText('String200') }}</a>
                        </OperationsPanel>   

                         <div class="col-xs-12" v-if="isLoading">
                            <Loading/>
                        </div>

                        <div class="col-xs-12" v-else>
                            <table class="table table-bordered table-striped table-hover" v-if="templates.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-10">{{ getLabelText('String233') }}</th>
                                        <th class="col-xs-2 align-center">{{ getLabelText('GN0000360') }}</th>
                                    </tr>
                                    <tr v-for="template in templates">
                                        <td >{{ template.TemplateName }}</td>
                                        <td class="align-center">
                                            <a v-bind:href="'/RCC/Clients/AccessTemplates.aspx?rt=' + (isResellerTemplate ? '1' : '0') + (isDetailMode ? '&dt=1' : '&dt=0') + '&op=2&TId=' + template.TemplateId" class="btn btn-primary waves-effect">{{ getLabelText('GN0000276') }} </a>
                                            <a v-if="!readOnly" @click="confirmActionRemove" :data-id="template.TemplateId" class="btn btn-primary waves-effect">{{ getLabelText('GN0000377') }} </a>
                                        </td>
                                    </tr>
                                    
                                </tbody>
                            </table>
                            <NoRecords v-else />
                        </div>
                    </div>
                </div>
            </div>
        </div>
`
}
