import {
    DEFAULT_DATE_FORMAT,
    DEFAULT_DATEPICKER_CLASS, DEFAULT_PLACEHOLDER_FORMAT,
    DEFAULT_WEEKDAYS_FORMAT, DESKTOP_TRANSITION, MOBILE_TRANSITION,
    POPOVER_IS_ACTIVE_CLASS,
} from "../constants";
import mediaQueriesMixin from "../../../mixins/mediaQueriesMixin";
import mixins from "vue-typed-mixins";
import moment from 'moment';

export default mixins(mediaQueriesMixin).extend({
    mixins: [mediaQueriesMixin],
    props: {
        disablePreviousDates: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: String,
            default: DEFAULT_PLACEHOLDER_FORMAT,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        isVertical: {
            type: Boolean,
            default: false,
        },
        locale: {
            type: String,
            default: 'en-US',
        },
    },
    data() {
        return {
            masks: {
                weekdays: DEFAULT_WEEKDAYS_FORMAT,
                data: DEFAULT_DATE_FORMAT,
                input: DEFAULT_DATE_FORMAT,
            },
            modelConfig: {
                type: 'string',
                mask: DEFAULT_DATE_FORMAT,
            },
            popover: {
                visibility: 'click',
            },
            debounce: 100,
            popoverIsActive: false,
        };
    },
    computed: {
        minDate(): Date | null {
            return this.disablePreviousDates ? new Date() : null;
        },
        pickerClass(): any {
            return {
                [DEFAULT_DATEPICKER_CLASS]: true,
                [POPOVER_IS_ACTIVE_CLASS]: this.popoverIsActive,
            };
        },
        columns(): number {
            return this.isVertical || this.isMobile ? 1 : 2;
        },
        rows(): number {
            return this.isVertical || this.isMobile ? 2 : 1;
        },
        picker(): any {
            return this.$refs.picker;
        },
    },
    methods: {
        openPopover(showPopover: (transition: object) => void): void {
            if (!this.disabled) {
                showPopover({transition: this.isMobile ? MOBILE_TRANSITION : DESKTOP_TRANSITION});
            }
        },
        setLocale(): void {
            moment.locale(this.locale);
        },
    },
    mounted() {
        this.setLocale();
    },
});