import DatePicker from '/Components/Common/DatePicker.js?v=3.9';
import { VueMultiSelect } from "/Components/Common/VueMultiSelect.js?v=3.9"
import { VueMultiSelectableSelected } from "/Components/Common/VueMultiSelectableSelected.js?v=3.9"

export default {
    components: {
        DatePicker,
        VueMultiSelect,
        VueMultiSelectableSelected
    },
    data() {
        return {
            number: '',
            currency: '',
            shortTime: '',
            shortDate: '',
            longDate: '',
            multiselectItems: []
        };
    },
    methods: {
        getString: function (key) {
            return Translation[key];
        },
        getPreviewData: async function () {

            await fetch("/webservices/machpanelservice.asmx/GetCurrentCulturePreview", fetchGet)
                .then(response => response.json()).then((data) => {

                    let previewData = JSON.parse(data.d);
                    this.number = previewData.number;
                    this.currency = previewData.currency;
                    this.shortTime = previewData.shortTime;
                    this.shortDate = previewData.shortDate;
                    this.longDate = previewData.longDate;

                })
                .catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        dateSelectHandler: function (d) {
            console.log('parent date selected handler with date Object: ' + d.selectedDate);
            console.log('parent date selected handler with date Str: ' + d.selectedDateStr);
        },
        selectionChangeHandler: function (selectedItems) {
            console.log(selectedItems);
        },
        selectionInfoHandler: function (selectableItems, selectedItems, id) {
            console.log("Selectable: " + JSON.stringify(selectableItems));
            console.log("Selected: " + JSON.stringify(selectedItems));
        }
    },
    created: async function () {
        this.getPreviewData();
        //this.multiselectItems = [
        //    { text: 'USD', value: '1', selected: false },
        //    { text: 'EUR', value: '2', selected: true },
        //    { text: 'SAR', value: '3', selected: false },
        //    { text: 'PKR', value: '4', selected: true }
        //];

        this.multiselectItems = accountStatusList.items.map(i => { return { text: i.text, value: i.value, selected: i.value % 2 == 0 ? true : false } });

    },
    template: `
            <div class="row">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card">
                            <div class="header">
                                <h3 :innerHTML="getString('String1026')"></h3>
                            </div>
                            <div class="body">
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('Date')">
                                    </div>
                                    
                                        <DatePicker @onDateSelected='dateSelectHandler' id="datePicker1"></DatePicker>
                                    
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('Date')">
                                    </div>
                                    
                                        <DatePicker @onDateSelected='dateSelectHandler' id="datePicker2"></DatePicker>
                                    
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('String1027')">
                                    </div>
                                    <div class="col-sm-10 col-xs-12" :innerHTML="number"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('GN0000952')">
                                    </div>
                                    <div class="col-sm-10 col-xs-12" :innerHTML="currency"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('GN0000779')">
                                    </div>
                                    <div class="col-sm-10 col-xs-12" :innerHTML="shortTime"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('String1028')">
                                    </div>
                                    <div class="col-sm-10 col-xs-12" :innerHTML="shortDate"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('String1029')">
                                    </div>
                                    <div class="col-sm-10 col-xs-12" :innerHTML="longDate"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('FAM0022')"></div>
                                    <div class="col-lg-4 col-md-6 col-sm-10 col-xs-12">
                                        <VueMultiSelect useTranslation="true" :items="multiselectItems" @selectionChange="selectionChangeHandler" isOrderable="true"/>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label" :innerHTML="getString('FAM0022')"></div>
                                    <div class="col-sm-10 col-xs-12">
                                        <VueMultiSelectableSelected useTranslation="true" :items="multiselectItems" id="paymentgroups" @selectionInfo="selectionInfoHandler"></VueMultiSelectableSelected>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    `
}