<template>
    <div :class="pickerClass">
        <div class="datepicker">
            <DatePicker
                @popoverWillShow="popoverIsActive = true"
                @popoverWillHide="hidePopover"
                @drag="setTemporaryDates"
                ref="picker"
                :popover="popover"
                :inputDebounce="debounce"
                :min-date="minDate"
                :modelConfig="modelConfig"
                trimWeeks
                :drag-attribute="dragAttrubute"
                :masks="masks"
                is-range
                :columns="columns"
                :rows="rows"
                :locale="locale"
                v-model="range">
                <template v-slot="{inputValue, inputEvents, showPopover, isDragging }">
                    <div class="datepicker__inputs" @click.stop="openPopover(showPopover)">
                        <InputComponent
                            ref="inputStart"
                            :disabled="disabled"
                            :placeholder="placeholder"
                            v-on="inputEvents.start"
                            :value="inputValue.start">
                            <template slot="prepend">
                                <CalendarIcon noHover :iconColor="themeVariables.gray60"/>
                            </template>
                        </InputComponent>
                        <InputComponent
                            ref="inputEnd"
                            :disabled="disabled"
                            :placeholder="placeholder"
                            v-on="inputEvents.end"
                            :value="inputValue.end">
                            <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:!datesWasSet}]">
                        {{ 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';
    import CalendarIcon from "../icons/datepicker/CalendarIcon.vue";
    import PopoverArrowIcon from "../icons/ArrowIcon.vue";
    // @ts-ignore
    import themeVariables from "../../assets/scss/colors.scss";
    import {
        DEFAULT_DATE_FORMAT, MOBILE_HEADER_FORMAT, RangeDateObject,
    } from "./constants";
    import CrossIcon from "../icons/CrossIcon.vue";

    export default mixins(datepickerMixin).extend({
        name: "DatepickerRange",
        props: {
            value: {
                type: Object,
                default: (): RangeDateObject => {
                    return {
                        start: '',
                        end: '',
                    };
                },
            },
        },
        mixins: [
            datepickerMixin,
        ],
        components: {
            CrossIcon,
            RightIcon,
            LeftIcon,
            DatePicker,
            InputComponent,
            CalendarIcon,
            PopoverArrowIcon,
        },
        data() {
            return {
                dragAttrubute: {
                    highlight: {
                        start: {
                            contentStyle: {
                                color: themeVariables.white,
                            },
                        },
                        base: {
                            contentStyle: {
                                color: themeVariables.gray1000,
                            },
                        },
                        end: {
                            contentStyle: {
                                color: themeVariables.white,
                            },
                        },
                    },
                },
                themeVariables: themeVariables,
                temporaryDates: {
                    start: '',
                    end: '',
                },
            };
        },
        computed: {
            range: {
                get(): RangeDateObject {
                    return this.value;
                },
                set(value: any): void {
                    this.$emit('input', value);
                },
            },
            mobileHeaderText(): string {
                if (this.datesWasSet) {
                    return moment(this.temporaryDates.start, DEFAULT_DATE_FORMAT).format(MOBILE_HEADER_FORMAT) + ' - ' + moment(this.temporaryDates.end, DEFAULT_DATE_FORMAT).format(MOBILE_HEADER_FORMAT);
                }
                return `${this.placeholder} - ${this.placeholder}`;
            },
            datesWasSet(): boolean {
                return !!this.temporaryDates.start && !!this.temporaryDates.end;
            },
            inputStart(): any {
                return this.$refs.inputStart;
            },
            inputEnd(): any {
                return this.$refs.inputEnd;
            },
        },
        methods: {
            setTemporaryDates(range: RangeDateObject): void {
                this.temporaryDates = range;
            },
            cancel(): void {
                this.picker.updateValue(this.range, {hidePopover: true});
                this.hidePopover();
            },
            hidePopover(): void {
                this.setTemporaryDates(this.range);
                this.inputStart.onBlur();
                this.inputEnd.onBlur();
                this.popoverIsActive = false;
            },
        },
    });
</script>

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