import VueSelect from '/Components/Common/VueSelect.js?v=3.4'
import { getLabelText } from '/Components/Common/utils.js?v=3.4'
import { VueMultiSelectableSelected } from "/Components/Common/VueMultiSelectableSelected.js?v=3.4"
import Loading from "/Components/Common/Loading.js?v=3.4"
/*
schedule: {
scheduleId: 0, 
vpsId: 0, 
TimezoneId: 26,
autoOn: false, 
offTimeHr: 6,
offTimeMin: 0,
offTimeClock: 'PM',
onTimeHr: 9,
onTimeMin: 0,
onTimeClock: 'AM',
monday: false,
tuesday: false,
wednesday: false,
thursday: false,
friday: false,
saturday: false,
sunday: false,
isEnabled: true
}
*/
export default {
    props: {
        readOnly: { type: Boolean, required: true }
    },
    computed: {
        showCustomer: {
            get: function () {
                if (this.ddlCustomers && this.ddlCustomers.length > 1)
                    return true;
                else
                    return false;
            },
            set: function (newValue) {
                //dummy statement
            }
        },
        showAccounts: {
            get: function () {
                if (this.selectableAccounts && this.selectableAccounts.length > 0)
                    return true;
                else
                    return false;
            }
        }
    },
    components: {
        VueSelect,
        VueMultiSelectableSelected,
        Loading
    },
    emits: ['cancelled', 'completed'],
    data() {
        return {
            isLoading: false,
            ddlTimezones: [],
            ddlCustomers: [],
            selectableAccounts: [],
            headerText: this.getLabelText('StrScheduleDetails'),
            selectedCustomerId: '-1',
            selectedCustomerText: '',
            selectedTimezoneId: '26',
            scheduleDetail: {},
            selectedVMs: [],
            days: {
                monday: true,
                tuesday: true,
                wednesday: true,
                thursday: true,
                friday: true,
                saturday: false,
                sunday: false,
            },
            autoOn: false,
            timeOptions: {
                hours: [
                    { text: '01', value: 1 },
                    { text: '02', value: 2 },
                    { text: '03', value: 3 },
                    { text: '04', value: 4 },
                    { text: '05', value: 5 },
                    { text: '06', value: 6 },
                    { text: '07', value: 7 },
                    { text: '08', value: 8 },
                    { text: '09', value: 9 },
                    { text: '10', value: 10 },
                    { text: '11', value: 11 },
                    { text: '12', value: 12 },
                ],
                minutes: [
                    { text: '00', value: 0 },
                    { text: '05', value: 5 },
                    { text: '10', value: 10 },
                    { text: '15', value: 15 },
                    { text: '20', value: 20 },
                    { text: '25', value: 25 },
                    { text: '30', value: 30 },
                    { text: '35', value: 35 },
                    { text: '40', value: 40 },
                    { text: '45', value: 45 },
                    { text: '50', value: 50 },
                    { text: '55', value: 55 },
                    { text: '59', value: 59 },
                ],
                clockSys: [
                    { text: 'AM', value: 'AM' },
                    { text: 'PM', value: 'PM' }
                ]
            },
            turnOffHr: 6,
            turnOffMin: 0,
            turnOffClockSys: 'PM',
            turnOnHr: 9,
            turnOnMin: 0,
            turnOnClockSys: 'AM',

        }
    },
    methods: {

        getLabelText,
        customerChangeHandler: async function (obj) {
            this.selectedCustomerId = obj.selectedValue;
            this.selectedCustomerText = obj.selectedText;
            let c = this;
            await this.setCustomerTimezone().then(c.fillAccounts);
        },
        timezoneChangeHandler: async function (obj) {
            this.selectedTimezoneId = obj.selectedValue;
        },
        fillCustomers: async function () {
            var vm = this;
            await fetch("/webservices/machpanelservice.asmx/GetCustomers", fetchGet)
                .then(response => response.json()).then((data) => {
                    vm.ddlCustomers = JSON.parse(data.d);
                    //**** Avoid to set default value when in edit mode ****//
                    if (vm.ddlCustomers.length > 0) {
                        vm.selectedCustomerId = vm.ddlCustomers[0].value;
                        vm.selectedCustomerText = vm.ddlCustomers[0].text;
                    }
                });
        },
        setCustomerTimezone: async function () {
            let vm = this;
            if (vm.selectedCustomerId > -1) {
                vm.selectableAccounts = [];
                await fetch("/webservices/machpanelservice.asmx/GetCustomerTimeZone?customerId=" + vm.selectedCustomerId, fetchGet)
                    .then(response => response.json()).then((data) => {
                        let result = JSON.parse(data.d);
                        vm.selectedTimezoneId = result.value
                    });
            }
            else
                await this.fillTimezones();
        },
        fillAccounts: async function () {
            var vm = this;
            vm.selectableAccounts = [];
            await fetch("/RCC/VPS/VPSAccounts.aspx/GetAccounts?customerId=" + vm.selectedCustomerId, fetchGet)
                .then(response => response.json()).then((data) => {
                    vm.selectableAccounts = [];
                    vm.selectableAccounts = data.d;
                });
        },
        fillTimezones: async function () {
            var vm = this;
            await fetch("/webservices/machpanelservice.asmx/FillTimezones", fetchGet)
                .then(response => response.json()).then((data) => {
                    let result = JSON.parse(data.d);
                    vm.ddlTimezones = result.items;
                    vm.selectedTimezoneId = result.initialValue;
                });
        },
        vMSelectionChangeHandler: function (selectableItems, selectedItems, id) {
            this.selectedVMs = selectedItems.map(x => x.value);
        },
        timeChangeHandler: async function (obj) {
            let time = obj.tag.toString();
            switch (time) {
                case 'turnOffHr':
                    this.turnOffHr = obj.selectedValue;
                    break;
                case 'turnOffMin':
                    this.turnOffMin = obj.selectedValue;
                    break;
                case 'turnOffClockSys':
                    this.turnOffClockSys = obj.selectedValue;
                    break;
                case 'turnOnHr':
                    this.turnOnHr = obj.selectedValue;
                    break;
                case 'turnOnMin':
                    this.turnOnMin = obj.selectedValue;
                    break;
                case 'turnOnClockSys':
                    this.turnOnClockSys = obj.selectedValue;
                    break;
            }
        },
        cancelRecord: function () {
            this.$emit('cancelled', {});
            clearAllMsgs();
        },
        saveRecord: async function (e) {
            clearAllMsgs();
            this.isLoading = true;
            var vm = this;

            if (!vm.selectedVMs || !(vm.selectedVMs.length > 0)) {
                displayErrorMsg(Error(this.getLabelText('strRequiredFieldsError')));
                this.isLoading = false;
                return false;
            }

            if (!vm.days.monday && !vm.days.tuesday && !vm.days.wednesday && !vm.days.thursday && !vm.days.friday && !vm.days.saturday && !vm.days.sunday)
            {
                displayErrorMsg(Error(this.getLabelText('strRequiredFieldsError') + ' ' + getLabelText('StrScheduleDaysRequired')));
                this.isLoading = false;
                return false;
            }

            let schedule = {
                vms: vm.selectedVMs,
                timezoneId: vm.selectedTimezoneId,
                autoOn: vm.autoOn,
                offTimeHr: vm.turnOffHr,
                offTimeMin: vm.turnOffMin,
                offTimeClock: vm.turnOffClockSys,
                onTimeHr: vm.turnOnHr,
                onTimeMin: vm.turnOnMin,
                onTimeClock: vm.turnOnClockSys,
                monday: vm.days.monday,
                tuesday: vm.days.tuesday,
                wednesday: vm.days.wednesday,
                thursday: vm.days.thursday,
                friday: vm.days.friday,
                saturday: vm.days.saturday,
                sunday: vm.days.sunday
            };

            let postRequest = { ...fetchPost };
            let params = {
                'payload': JSON.stringify(schedule)
            };

            postRequest.body = JSON.stringify(params);

            await fetch("/RCC/VPS/VPSAccounts.aspx/CreateSchedule", postRequest)
                .then(response => response.json()).then((data) => {
                    vm.isLoading = false;
                    vm.$emit('completed', {});
                }).catch(function (e) {
                    vm.isLoading = false;
                    displayErrorMsg(e);
                });
        },
    },
    created: async function () {
        var vm = this;
        await this.fillTimezones().then(vm.fillCustomers).then(vm.fillAccounts).catch(function (e) {

            vm.isLoading = false;
            displayErrorMsg(e);
        });
    },
    updated: function () {
        updateSelectInterface();
    },
    template: `
    <div class="card">
        <div class="header">
            <h3 v-html="this.headerText"></h3>
        </div>

        <div class="body">
            <div class="col-xs-12" v-if="this.isLoading">
                <Loading />
            </div >
            <div v-else>
                <div class="row" v-if="this.showCustomer">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('GN0000850') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlCustomers" :options="ddlCustomers" :selectedValue="selectedCustomerId" @selectchange="customerChangeHandler" />
                        </div>
                    </div>
                </div>
                <div class="row" v-if="showAccounts">
                    <div class="col-xs-12 row-label">* {{ getLabelText('strVirtualMachines') }}: </div>
                    <div class="col-xs-12">
                        <VueMultiSelectableSelected :useTranslation="false" :items="selectableAccounts" id="vms_accounts" @selectionInfo="vMSelectionChangeHandler" />
                    </div>
                </div>
                <div class="row" v-if="!showAccounts">
                    <div class="col-xs-12 row-label">* {{ getLabelText('strVirtualMachines') }}: </div>
                    <div class="col-xs-12">
                        <VueMultiSelectableSelected :useTranslation="false" :items="selectableAccounts" id="vms_accounts_dummy" />
                    </div>
                </div>
                <div class="row" v-if="this.showCustomer">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('strDays') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group">
                            <input type="checkbox" v-model="this.days.monday" />
                            &nbsp;&nbsp;
                            <input type="checkbox" v-model="this.days.tuesday" />
                            &nbsp;&nbsp;
                            <input type="checkbox" v-model="this.days.wednesday" />
                            &nbsp;&nbsp;
                            <input type="checkbox" v-model="this.days.thursday" />
                            &nbsp;&nbsp;
                            <input type="checkbox" v-model="this.days.friday" />
                            &nbsp;&nbsp;
                            <input type="checkbox" v-model="this.days.saturday" />
                            &nbsp;&nbsp;
                            <input type="checkbox" v-model="this.days.sunday" />
                            &nbsp;&nbsp;
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label"></div>
                    <div class="col-sm-4 col-xs-12 m-t--10">
                        <div class="form-group" style="font-size:0.80em;font-weight:bold">
                            <span>MO</span>
                            &nbsp;&nbsp;
                            <span>TU</span>
                            &nbsp;&nbsp;
                            <span>WE</span>
                            &nbsp;&nbsp;
                            <span>TH</span>
                            &nbsp;&nbsp;
                            <span>FR</span>
                            &nbsp;&nbsp;
                            <span>SA</span>
                            &nbsp;&nbsp;
                            <span>SU</span>
                            &nbsp;&nbsp;
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('Lync179') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlTimezones" :options="ddlTimezones" :selectedValue="selectedTimezoneId" @selectchange="timezoneChangeHandler" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">{{ getLabelText('HVServer55') }}</div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group">
                            <input type="checkbox" v-model="this.autoOn" />
                        </div>
                    </div>
                </div>
                <div class="row m-b-0">
                    <div class="col-sm-2 col-xs-12 row-label m-b-0"></div>
                    <div class="col-sm-10 col-xs-12">
                        <div class="form-group m-b-0">
                            <span class="col-xs-6 m-l--15 m-b-0">
                                <div class="col-xs-3 m-l--15 m-b-0">
                                    {{ getLabelText('strHours') }}
                                </div>
                                <div class="col-xs-3 m-b-0">
                                    {{ getLabelText('strMinutes') }}
                                </div>
                                <div class="col-xs-3 m-b-0">
                                    {{ getLabelText('Period') }}
                                </div>
                            </span>
                            <span v-if="this.autoOn" class="col-xs-6 m-l--15 m-b-0">
                                <div class="col-xs-3 m-l--15 m-b-0">
                                </div>
                                <div class="col-xs-3 m-b-0">
                                    {{ getLabelText('strHours') }}
                                </div>
                                <div class="col-xs-3 m-b-0">
                                    {{ getLabelText('strMinutes') }}
                                </div>
                                <div class="col-xs-3 m-b-0">
                                    {{ getLabelText('Period') }}
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
                 <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('HVServer56') + ' ' + getLabelText('GN0000779') }}: </div>
                    <div class="col-sm-10 col-xs-12">
                        <div class="form-group">
                            <span class="col-xs-6 m-l--15">
                                <div class="col-xs-3 m-l--15">
                                    <VueSelect id="ddlTurnOffHr" :options="this.timeOptions.hours" :selectedValue="turnOffHr" tag="turnOffHr" @selectchange="timeChangeHandler" />
                                </div>
                                <div class="col-xs-3">
                                    <VueSelect id="ddlTurnOffMin" :options="this.timeOptions.minutes" :selectedValue="turnOffMin"  tag="turnOffMin" @selectchange="timeChangeHandler" />
                                </div>
                                <div class="col-xs-3">
                                    <VueSelect id="ddlTurnOffClockSys" :options="this.timeOptions.clockSys" :selectedValue="turnOffClockSys"  tag="turnOffClockSys" @selectchange="timeChangeHandler"/>
                                </div>
                            </span>
                            <span v-if="this.autoOn" class="col-xs-6 m-l--15">
                                <div class="col-xs-3 m-l--15">
                                    {{ getLabelText('HVServer55') + ' ' + getLabelText('GN0000779') }}:
                                </div>
                                <div class="col-xs-3">
                                    <VueSelect id="ddlTurnOnHr" :options="this.timeOptions.hours" :selectedValue="turnOnHr" tag="turnOnHr" @selectchange="timeChangeHandler"/>
                                </div>
                                <div class="col-xs-3">
                                    <VueSelect id="ddlTurnOnMin" :options="this.timeOptions.minutes" :selectedValue="turnOnMin" tag="turnOnMin" @selectchange="timeChangeHandler"/>
                                </div>
                                <div class="col-xs-3">
                                    <VueSelect id="ddlTurnOnClockSys" :options="this.timeOptions.clockSys" :selectedValue="turnOnClockSys" tag="turnOnClockSys" @selectchange="timeChangeHandler"/>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-xs-12">
                        <a @click.prevent="this.saveRecord" v-if="!readOnly" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000281')}} </a>
                        <a @click.prevent="this.cancelRecord" class="btn btn-primary waves-effect">{{ getLabelText('GN0000572')}} </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `
}


