<template>
    <div :class="pickerClass">
        <div class="datepicker">
            <DatePicker
                @popoverWillShow="popoverIsActive = true"
                @popoverWillHide="hidePopover"
                ref="picker"
                :popover="popover"
                :inputDebounce="debounce"
                :min-date="minDate"
                :modelConfig="modelConfig"
                trimWeeks
                :columns="columns"
                :rows="rows"
                :masks="masks"
                :locale="locale"
                v-model="date">
                <template v-slot="{inputValue, inputEvents, showPopover}">
                    <div class="datepicker__inputs" @click.stop="openPopover(showPopover)">
                        <InputComponent
                            ref="input"
                            v-on="inputEvents"
                            :value="inputValue"
                            :placeholder="placeholder"
                            :disabled="disabled">
                            <template slot="prepend">
                                <CalendarIcon noHover :iconColor="themeVariables.gray60"/>
                            </template>
                        </InputComponent>
                    </div>
                </template>
                <div slot='header-left-button'
                     slot-scope='{ page }'>
                    <LeftIcon/>
                </div>
                <div
                    slot='header-right-button'
                    slot-scope='{ page }'>
                    <RightIcon/>
                </div>
                <div
                    slot='nav-left-button'
                    slot-scope='{ page }'>
                    <LeftIcon ignoreWhite noHover :iconColor="themeVariables.white"/>
                    <div class="nav__arrow">
                        <PopoverArrowIcon noHover :icon-color="themeVariables.gray700"/>
                    </div>
                </div>
                <div
                    slot='nav-right-button'
                    slot-scope='{ page }'>
                    <RightIcon ignoreWhite noHover :iconColor="themeVariables.white"/>
                </div>
                <div slot="footer"
                     class="datepicker__header"
                     v-if="isMobile && popoverIsActive">
                    <div :class="['datepicker__header__text', {withPlaceholder:!temporaryDate}]">
                        {{ mobileHeaderText }}
                    </div>
                    <div class="datepicker__cross" @click="cancel">
                        <CrossIcon/>
                    </div>
                </div>
            </DatePicker>
        </div>
    </div>
</template>

<script lang="ts">
    import DatePicker from 'v-calendar/lib/components/date-picker.umd';
    import mixins from "vue-typed-mixins";
    import datepickerMixin from "./mixins/datepickerMixin";
    import LeftIcon from "../icons/navigation/LeftIcon.vue";
    import RightIcon from "../icons/navigation/RightIcon.vue";
    import moment from 'moment';
    import InputComponent from '../forms/inputComponent/InputComponent.vue';
    // @ts-ignore
    import themeVariables from "../../assets/scss/colors.scss";
    import CalendarIcon from "../icons/datepicker/CalendarIcon.vue";
    import PopoverArrowIcon from "../icons/ArrowIcon.vue";
    import {DEFAULT_DATE_FORMAT} from "../../components/datepicker/constants";
    import CrossIcon from "../icons/CrossIcon.vue";

    export default mixins(datepickerMixin).extend({
        name: "Datepicker",
        props: {
            value: {
                type: String,
                default: '',
            },
        },
        mixins: [
            datepickerMixin,
        ],
        components: {
            RightIcon,
            LeftIcon,
            DatePicker,
            InputComponent,
            CalendarIcon,
            PopoverArrowIcon,
            CrossIcon,
        },
        data() {
            return {
                themeVariables: themeVariables,
                temporaryDate: '',
            };
        },
        computed: {
            date: {
                get(): any {
                    return this.value;
                },
                set(value: any): void {
                    this.$emit('input', value);
                },
            },
            mobileHeaderText(): string {
                if (this.temporaryDate) {
                    return moment(this.temporaryDate, DEFAULT_DATE_FORMAT).format('MMM D,YYYY');
                }
                return this.placeholder;
            },
        },
        methods: {
            cancel(): void {
                this.picker.updateValue(this.date, {hidePopover: true});
                this.hidePopover();
            },
            hidePopover(): void {
                this.temporaryDate = this.date;
                // @ts-ignore
                this.$refs.input.onBlur();
                this.popoverIsActive = false;
            },

        },
    });
</script>

<style scoped lang="scss">
    @import "datepicker";
</style>
