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

export default {
    props: {
        readOnly: { type: Boolean, required: true }
    },
    components: {
        InputText
    },
    data() {
        return {
            EnableBandwidthMetering: false,
            EnableBandwidthEmailAlert: false,
            bandwidthEmailAlert: '1',
            BandwidthEmailAlertPercentage: this.getLabelText('GN00001232'),
            AutomaticSuspendEnabled: false,
            BandwidthAutomaticSuspendDays: 1,
            AutoBandwidthResume: 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.EnableBandwidthMetering = data.d.EnableBandwidthMetering;
                        vm.EnableBandwidthEmailAlert = data.d.EnableBandwidthEmailAlert;
                        vm.bandwidthEmailAlert = data.d.bandwidthEmailAlert;
                        vm.BandwidthEmailAlertPercentage = data.d.BandwidthEmailAlertPercentage;
                        vm.AutomaticSuspendEnabled = data.d.AutomaticSuspendEnabled;
                        vm.BandwidthAutomaticSuspendDays = data.d.BandwidthAutomaticSuspendDays;
                        vm.AutoBandwidthResume = data.d.AutoBandwidthResume;
                    }
                }).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 = {
                "EnableBandwidthMetering": this.EnableBandwidthMetering,
                "EnableBandwidthEmailAlert": this.EnableBandwidthEmailAlert,
                "BandwidthEmailAlertPercentage": this.BandwidthEmailAlertPercentage,
                "bandwidthEmailAlert": this.bandwidthEmailAlert,
                "AutoBandwidthResume": this.AutoBandwidthResume,
                "AutomaticSuspendEnabled": this.AutomaticSuspendEnabled,
                "BandwidthAutomaticSuspendDays": this.BandwidthAutomaticSuspendDays
            };
            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="EnableBandwidthMetering" />
                        </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="EnableBandwidthEmailAlert" />
                        </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="BandwidthEmailAlertPercentage" />
                        </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="AutomaticSuspendEnabled" v-model="AutomaticSuspendEnabled" />
                        </div>

                        <div class="col-sm-2 col-xs-12" id="Div_ddlAutomaticSuspend" v-show="AutomaticSuspendEnabled">
                            <select v-model="BandwidthAutomaticSuspendDays" 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="AutomaticSuspendEnabled">{{ 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="AutoBandwidthResume" />
                        </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>
`
}
