import { getLabelText } from '/Components/Common/utils.js?v=3.4'
import InputText from "/Components/Common/InputText.js?v=3.4"

export default {
    props: {
        readOnly: { type: Boolean, required: true }
    },
    components: {
        InputText
    },
    data() {
        return {
            chkEnableBandwidthMetering: false,
            chkBandwidthEmailAlert: false,
            bandwidthEmailAlert: '1',
            txtbandwidthEmailAlert: this.getLabelText('GN00001232'),
            chkAutomaticSuspendEnabled: false,
            bandwidthAutomaticSuspend: 1,
            chkAutoBandwidthResume: false
        }
    },
    methods: {
        getLabelText,
        listRecords: async function () {

            var vm = this;

            let postRequest = { ...fetchPost };
            postRequest.body = ''; // JSON.stringify(vm.search);

            await fetch("/PCC/VPS/Setup.aspx/GetQuotaSettings", postRequest)
                .then(response => response.json()).then((data) => {
                                       
                    if (data.d != null) {
                        vm.chkEnableBandwidthMetering = data.d.chkEnableBandwidthMetering;
                        vm.chkBandwidthEmailAlert = data.d.chkBandwidthEmailAlert;
                        vm.bandwidthEmailAlert = data.d.bandwidthEmailAlert;
                        vm.txtbandwidthEmailAlert = data.d.txtbandwidthEmailAlert;
                        vm.chkAutomaticSuspendEnabled = data.d.chkAutomaticSuspendEnabled;
                        vm.bandwidthAutomaticSuspend = data.d.bandwidthAutomaticSuspend;
                        vm.chkAutoBandwidthResume = data.d.chkAutoBandwidthResume;
                    }
                }).catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        quotaSave: function () {
            clearAllMsgs();
            if (this.bandwidthEmailAlert == '') {
                displayErrorMsg(Error(this.getLabelText('strRequiredFieldsError')));
                return false;
            }

            var vm = this;
            
            let postRequest = { ...fetchPost };
            let params = {
                "chkEnableBandwidthMetering": this.chkEnableBandwidthMetering,
                "chkBandwidthEmailAlert": this.chkBandwidthEmailAlert,
                "txtbandwidthEmailAlert": this.txtbandwidthEmailAlert,
                "bandwidthEmailAlert": this.bandwidthEmailAlert,
                "chkAutoBandwidthResume": this.chkAutoBandwidthResume,
                "chkAutomaticSuspendEnabled": this.chkAutomaticSuspendEnabled,
                "bandwidthAutomaticSuspend": this.bandwidthAutomaticSuspend
            };
            postRequest.body = JSON.stringify(params);

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

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

        updateSelectInterface();
        AdminBSBThemeChanges();

        await this.listRecords();
    },
    updated: function () {
        updateSelectInterface();
        AdminBSBThemeChanges();
    },
    template: `

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

                <div class="header">
                    <h3>{{ getLabelText('String365') }}</h3>
                </div>

                <div class="body">
                    <div class="row">
                        <div class="col-sm-3 col-xs-12 row-label">{{ getLabelText('EnableBandwidthMetering') }} :</div>
                        <div class="col-sm-4 col-xs-12">
                            <input type="checkbox" v-model="chkEnableBandwidthMetering" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3 col-xs-12 row-label">{{'* ' + getLabelText('String389') }} :</div>
                        <div class="col-sm-1 col-xs-12">
                            <input type="checkbox" v-model="chkBandwidthEmailAlert" />
                        </div>
                        <div class="col-sm-2 col-xs-12">
                            <select v-model="bandwidthEmailAlert" class="vue-select">
                                <option value="1">{{getLabelText("SMI0357")}}</option>
                                <option value="2">{{getLabelText("SMI0358")}}</option>
                                <option value="3">{{getLabelText("SMI0359")}}</option>
                            </select>
                        </div>
                        <div class="col-sm-3 col-xs-12">{{ getLabelText('BandwidthUsage') }}</div>
                        <div class="col-sm-1 col-xs-12">
                            <InputText v-model:fieldValue="txtbandwidthEmailAlert" />
                        </div>
                        <div class="col-sm-2 col-xs-12">
                            {{ '% ' + getLabelText('AllowedLimit') }}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3 col-xs-12 row-label">{{ getLabelText('String363') }} :</div>
                        <div class="col-sm-1 col-xs-12">
                            <input type="checkbox" id="chkAutomaticSuspendEnabled" v-model="chkAutomaticSuspendEnabled" />
                        </div>

                        <div class="col-sm-2 col-xs-12" id="Div_ddlAutomaticSuspend" v-show="chkAutomaticSuspendEnabled">
                            <select v-model="bandwidthAutomaticSuspend" class="vue-select">
                                <option v-for="n in 30" :value="n">{{ n }}</option>
                            </select>
                        </div>
                        <div class="col-sm-4 col-xs-12" id="Div_LblAutomaticSuspend" v-show="chkAutomaticSuspendEnabled">{{ getLabelText('BandWidthOverUsed') }}</div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3 col-xs-12 row-label">{{ getLabelText('String382') }} :</div>
                        <div class="col-sm-4 col-xs-12">
                            <input type="checkbox" v-model="chkAutoBandwidthResume" />
                        </div>
                    </div>

                    <div class="row" v-if="!readOnly">
                        <div class="col-xs-12">
                            <a @click.prevent="quotaSave"  class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000281')}} </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
`
}
