<template>
    <span>
        <span
            v-if="isAlwaysOpen"
            class="tb-hours-now text-grey-darkest"
        >
            <tb-opening-times-line-preview
                :opening-times="openingTimes"
                :language-labels="languageLabels"
                :date-format="dateFormat"
            />
        </span>
        <button
            v-else
            @click="additionalActive = !additionalActive"
            class="tb-hours-now text-grey-darkest"
        >
            <tb-opening-times-line-preview
                :opening-times="openingTimes"
                :language-labels="languageLabels"
                :date-format="dateFormat"
            />
            <svg class="tb-hours-now__toggle-icon c-icon" aria-hidden="true">
                <use :xlink:href="toggleIcon" />
            </svg>
        </button>
        <div v-if="additionalActive">
            <tb-opening-times-date-picker v-model="dateForUpcoming" />
            <tb-opening-times-table
                :language-labels="languageLabels"
                :opening-times="openingTimes"
                :date-format="dateFormat"
                :for-date-and-time="dateForUpcoming"
            />
        </div>
    </span>
</template>
<script>
import TbOpeningTimesLinePreview from './opening-times-line-preview.vue';
import TbOpeningTimesDatePicker from './opening-times-date-picker.vue';
import TbOpeningTimesTable from './opening-times-table.vue';
import { hasLanguageLabels } from './has-language-label.mixin';

export default {
    name: 'TbOpeningTimesExtendablePreview',
    mixins: [ hasLanguageLabels ],
    components: { TbOpeningTimesLinePreview, TbOpeningTimesDatePicker, TbOpeningTimesTable },
    props: {
        openingTimes: { type: Object, required: true },
        dateFormat: { type: String, required: true },
    },

    data: () => ({
        additionalActive: false,
        dateForUpcoming: new Date(),
    }),

    computed: {
        toggleIcon() {
            return this.additionalActive
                ? '#tb-poi-opening-times-toggle-close'
                : '#tb-poi-opening-times-toggle-open';
        },

        isAlwaysOpen() {
            return this.openingTimes.times.length && this.openingTimes.times[0].isAlwaysOpen;
        },
    },
};
</script>
