<template>
    <strong v-if="view === 'always_open'" class="tb-hours-now__state tb-hours-now__state--open">
        {{ translate('heading.alwaysOpen') }}
    </strong>

    <span v-else-if="view === 'open'" class="tb-hours-now__info-line">
        <strong class="tb-hours-now__state tb-hours-now__state--open">
            {{ translate('heading.open') }}
        </strong>
        {{ translate('heading.open.until', [ resolvedOpeningTimes.timeRange.end ]) }}
    </span>

    <span v-else-if="view === 'open_closing_soon_reopens_today'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--changes-soon">
                {{ translate('heading.closingSoon') }}
            </strong>
            <span class="tb-hours-now__info-line">
                {{ translate('subtext.closesAt', [ resolvedOpeningTimes.timeRange.end ]) }}
            </span>
            <span class="tb-hours-now__info-line">
                {{ translate('subtext.opensAgainAt', [
                    resolvedOpeningTimes.timeRange.beginning,
                    resolvedOpeningTimes.timeRange.end
                ]) }}
            </span>
        </span>
    </span>

    <span v-else-if="view === 'open_closing_soon'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--changes-soon">
                {{ translate('heading.closingSoon') }}
            </strong>
        </span>
        <span class="tb-hours-now__info-line">
            {{ translate('subtext.closesAt', [ resolvedOpeningTimes.timeRange.end ]) }}
        </span>
    </span>

    <span v-else-if="view === 'open_reopens_today'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--open">
                {{ translate('heading.open') }}
            </strong>
            {{ translate('heading.open.until', [ resolvedOpeningTimes.timeRange.end ]) }}
        </span>
        <span class="tb-hours-now__info-line">
            {{ translate('subtext.opensAgainAt', [
                resolvedOpeningTimes.timeRange.beginning,
                resolvedOpeningTimes.timeRange.end
            ]) }}
        </span>
    </span>

    <span v-else-if="view === 'closed_opens_soon'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--changes-soon">
                {{ translate('heading.openSoon') }}
            </strong>
        </span>
        <span class="tb-hours-now__info-line">
            {{ translate('subtext.openTime', [
                resolvedOpeningTimes.nextTimeRange.beginning,
                resolvedOpeningTimes.nextTimeRange.end
            ]) }}
        </span>
    </span>

    <span v-else-if="view === 'closed_opens_today'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--closed">
                {{ translate('heading.closed') }}
            </strong>
        </span>
        <span class="tb-hours-now__info-line">
            {{ translate('subtext.openTime', [
                resolvedOpeningTimes.nextTimeRange.beginning,
                resolvedOpeningTimes.nextTimeRange.end
            ]) }}
        </span>
    </span>

    <span v-else-if="view === 'closed_opens_tomorrow'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--closed">
                {{ closedLabel }}
            </strong>
        </span>
        <span class="tb-hours-now__info-line">
            {{ translate('subtext.openTomorrow', [
                resolvedOpeningTimes.nextTimeRange.beginning,
                resolvedOpeningTimes.nextTimeRange.end
            ]) }}
        </span>
    </span>

    <span v-else-if="view === 'closed_opens_day_after_tomorrow'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--closed">
                {{ closedLabel }}
            </strong>
        </span>
        <span class="tb-hours-now__info-line">
            {{ translate('subtext.openDayAfterTomorrow', [
                resolvedOpeningTimes.nextTimeRange.beginning,
                resolvedOpeningTimes.nextTimeRange.end
            ]) }}
        </span>
    </span>

    <span v-else-if="view === 'closed_opens_within_next_week'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--closed">
                {{ closedLabel }}
            </strong>
        </span>
        <span class="tb-hours-now__info-line">
            <template v-if="isNextOpenOnSpecificWeekDay">
                {{ translate(`subtext.openOnWeekday.${weekdayName(resolvedOpeningTimes.nextOpenWeekday)}`, [
                    resolvedOpeningTimes.nextTimeRange.beginning,
                    resolvedOpeningTimes.nextTimeRange.end
                ]) }}
            </template>
            <template v-else>
                {{ translate('subtext.opensWithinNextWeek', [
                    resolvedOpeningTimes.nextTimeRange.beginning,
                    resolvedOpeningTimes.nextTimeRange.end
                ]) }}
            </template>
        </span>
    </span>

    <span v-else-if="view === 'closed_opens_on_date'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--closed">
                {{ closedLabel }}
            </strong>
        </span>
        <span class="tb-hours-now__info-line">
            {{ translate('subtext.opensOn', [
                nextOpenDate,
                resolvedOpeningTimes.nextTimeRange.beginning,
                resolvedOpeningTimes.nextTimeRange.end,
            ]) }}
        </span>
    </span>

    <span v-else-if="view === 'closed'">
        <span class="tb-hours-now__info-line">
            <strong class="tb-hours-now__state tb-hours-now__state--closed">
                {{ closedLabel }}
            </strong>
        </span>
    </span>
</template>
<script>
import formatDate from 'date-fns/format';
import  { updateEndTimeOfSingleTimesAtResultIfSpillingOverToNextDay } from '@nimius/toubiz-opening-times-calculation';
import { hasLanguageLabels } from './has-language-label.mixin';

const VIEW = Object.freeze({
    NONE: 'none',
    OPEN: 'open',
    ALWAYS_OPEN: 'always_open',
    OPEN_CLOSING_SOON_REOPENS_TODAY: 'open_closing_soon_reopens_today',
    OPEN_CLOSING_SOON: 'open_closing_soon',
    OPEN_REOPENS_TODAY: 'open_reopens_today',
    CLOSED_OPENS_SOON: 'closed_opens_soon',
    CLOSED_OPENS_TODAY: 'closed_opens_today',
    CLOSED_OPENS_TOMORROW: 'closed_opens_tomorrow',
    CLOSED_OPENS_DAY_AFTER_TOMORROW: 'closed_opens_day_after_tomorrow',
    CLOSED_OPENS_WITHIN_NEXT_WEEK: 'closed_opens_within_next_week',
    CLOSED_OPENS_ON_DATE: 'closed_opens_on_date',
    CLOSED: 'closed',
});


export default {
    name: 'TbOpeningTimesLinePreview',
    mixins: [ hasLanguageLabels ],
    props: {
        openingTimes: { type: Object, required: true },
        dateFormat: { type: String, default: 'YYYY-MM-DD' },
        forDateAndTime: { type: Date, default: () => new Date() },
    },

    data: () => ({
        nextOpenDate: null,
        resolvedOpeningTimes: null,
    }),

    watch: {
        openingTimes: {
            handler: 'updateResolvedOpeningTimes',
            immediate: true,
        },
        forDateAndTime: 'updateResolvedOpeningTimes',
    },

    methods: {
        weekdayName(number) {
            switch (number) {
                case 1: return 'monday';
                case 2: return 'tuesday';
                case 3: return 'wednesday';
                case 4: return 'thursday';
                case 5: return 'friday';
                case 6: return 'saturday';
                case 7:
                case 0:
                    return 'sunday';
            }
        },

        updateResolvedOpeningTimes() {
            const resolvedOpeningTimes = this.openingTimes.timesAt(this.forDateAndTime);
            this.resolvedOpeningTimes = updateEndTimeOfSingleTimesAtResultIfSpillingOverToNextDay(resolvedOpeningTimes);
            const nextOpen = new Date(this.resolvedOpeningTimes.nextOpenDate);
            this.resolvedOpeningTimes.nextOpenWeekday = nextOpen.getDay();
            this.nextOpenDate = formatDate(nextOpen, this.dateFormat);
        },
    },

    computed: {
        view() {
            const openingTimes = this.resolvedOpeningTimes;

            if (
                !openingTimes ||
                (!openingTimes.isOpen && !openingTimes.nextOpenDate)
            ) {
                return VIEW.NONE;
            }

            if (openingTimes.defaultsToAlwaysOpen) {
                return VIEW.ALWAYS_OPEN;
            }

            if (openingTimes.isOpen) {
                if (openingTimes.minutesUntilClosing !== null
                    && openingTimes.minutesUntilClosing > 0
                    && openingTimes.minutesUntilClosing <= 60
                ) {
                    return openingTimes.daysUntilNextOpen === 0
                        ? VIEW.OPEN_CLOSING_SOON_REOPENS_TODAY
                        : VIEW.OPEN_CLOSING_SOON;
                }

                if (openingTimes.daysUntilNextOpen === 0
                    && openingTimes.timeRange.end.hour < openingTimes.nextTimeRange.beginning.hour
                ) {
                    return VIEW.OPEN_REOPENS_TODAY;
                }

                return VIEW.OPEN;
            }

            if (openingTimes.daysUntilNextOpen <= 1
                && openingTimes.minutesUntilNextOpen !== null
                && openingTimes.minutesUntilNextOpen <= 60
            ) {
                return VIEW.CLOSED_OPENS_SOON;
            }

            switch (openingTimes.daysUntilNextOpen) {
                case 0: return VIEW.CLOSED_OPENS_TODAY;
                case 1: return VIEW.CLOSED_OPENS_TOMORROW;
                case 2: return VIEW.CLOSED_OPENS_DAY_AFTER_TOMORROW;

                case 3:
                case 4:
                case 5:
                case 6:
                    return VIEW.CLOSED_OPENS_WITHIN_NEXT_WEEK;
            }

            if (openingTimes.daysUntilNextOpen) {
                return VIEW.CLOSED_OPENS_ON_DATE;
            }

            return VIEW.CLOSED;
        },

        wasOpenEarlierToday() {
            if (this.resolvedOpeningTimes.openingTimes) {
                return this.resolvedOpeningTimes.openingTimes.timeRanges.length > 0;
            }
            return false;
        },

        closedLabel() {
            if (this.wasOpenEarlierToday) {
                return this.translate('heading.closed');
            }
            return this.translate('heading.closedToday');
        },

        isNextOpenOnSpecificWeekDay() {
            return this.resolvedOpeningTimes.nextOpenWeekday >= 1
                && this.resolvedOpeningTimes.nextOpenWeekday <= 7;
        },
    },
};
</script>
