import { langPacks } from '/components/common/DatePickerLangPack.js';

export default {
    props: {
        id: { type: String, required: false, default: 'VueDatePicker' },
        isRequired: { type: Boolean, required: false, default: false },
        isDisabled: { type: Boolean, required: false, default: false },
        displayAsLabel: { type: Boolean, required: false, default: false },
        defaultVal: { type: String, required: false },
        showMonthMenu: { type: Boolean, required: false, default: true },
        showYearMenu: { type: Boolean, required: false, default: true },
        showWeekCol: { type: Boolean, required: false, default: true },        
        minDate: { type: String, required: false },
        maxDate: { type: String, required: false },
        wrapperClass: { type: String, required: false, default: 'col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-1' },
        showBtnPanel: { type: Boolean, required: false, default: true },
        setDefaultToCurrentDate: {type: Boolean, required: false, default: true}
    },
    data() {
        return {
            currentDate: this.defaultVal,
            currentDateFormat: datePattern.replace('yyyy', 'yy').replace('mm', 'm').replace('dd', 'd').toLowerCase(),
            showRequired: this.isRequired ? this.isRequired : false            
        };
    },
    emits: ['onDateSelected'],
    methods: {
        init: function () {
            let c = this;
            let currentDateObj = $.datepicker.parseDate(c.currentDateFormat, this.currentDate);
            //https://stackoverflow.com/questions/13865218/jquery-ui-datepicker-set-year-range-dropdown-to-100-years
            let yearRange = (currentDateObj.getFullYear() - 20) + ':' + (Date.now().getFullYear() + 20);

            setTimeout(() => {
                jQuery.datepicker.regional[language] = langPacks.get(language);

                jQuery.datepicker.setDefaults(langPacks.get(language));
                let selector = (this.id && this.id != '') ? '.datepicker#'+ this.id : '.datepicker#VueDatePicker';
                $(selector).datepicker(
                    {
                        dateFormat: c.currentDateFormat,
                        showAnim: 'slideDown',
                        firstDay: 1,
                        changeMonth: c.showMonthMenu,
                        changeYear: c.showYearMenu,
                        showWeek: c.showWeek,
                        minDate: c.minDate,
                        maxDate: c.maxDate,
                        yearRange: yearRange, 
                        showButtonPanel: c.showBtnPanel,
                        disabled: c.isDisabled,
                        onSelect: (txt) => { this.currentDate = txt; c.dateSelectHandler(txt.toString()); }
                    }
                );
                if (c.setDefaultToCurrentDate && (!c.currentDate || c.currentDate == '')) {
                    this.currentDate = new Intl.DateTimeFormat(locale).format(new Date());
                }
            }, 50);
        },
        dateSelectHandler: function (dateVal) {
            if (dateVal) {
                if ((typeof dateVal) == 'object')
                    dateVal = dateVal.target.value;
                let selectedDate = null;
                try {
                    selectedDate = $.datepicker.parseDate(this.currentDateFormat, dateVal);
                    this.currentDate = dateVal;
                    this.$emit('onDateSelected', { selectedDate: selectedDate, selectedDateStr: dateVal });
                    this.showRequired = false;
                } catch (e) { console.log(e);}
                finally { /*this.$forceUpdate();*/ }
            }
        },
        focusOutHandler: function (e) {
            this.showRequired = false;
            if (this.isRequired && e.target.value == '') {
                this.showRequired = true;
            }
            this.$forceUpdate();
        }
    },
    created: async function () {
        let c = this;        
        
        this.currentDate = new Intl.DateTimeFormat(locale).format(Date.parse(this.currentDate));

        //c.currentDateFormat = datePattern.replace('yyyy', 'yy').replace('mm', 'm').replace('dd', 'd').toLowerCase();  
        c.init();

    },
    template: `
<div :class="wrapperClass">
    <div class='form-group' :class='{"validation-failed":showRequired}'>
        <div :class='{"form-line":!displayAsLabel}'>
            <input type='text' :id="id" class='form-control datepicker' @change.prevent='dateSelectHandler' @focusout='focusOutHandler' :value='currentDate'></input>
        </div>
    </div>
</div>`
}
