<template>
    <tb-opening-times-parser
        v-if="article"
        :opening-times-definition="article.openingTimes"
        opening-times-format="toubizV1"
    >
        <template #default="{ openingTimes }">
            <tb-opening-times-simple
                v-if="openingTimes"
                :opening-times="openingTimes"
                :language-labels="languageLabels"
                :date-format="dateFormat"
            />
        </template>
    </tb-opening-times-parser>
</template>

<script>
import TbOpeningTimesSimple from './opening-times-simple.vue';
import TbOpeningTimesParser from './opening-times-parser.vue';
import { apiRequest } from '../common/toubiz-request';

export default {
    name: 'TbOpeningTimesSimpleLive',
    components: { TbOpeningTimesParser, TbOpeningTimesSimple },
    props: {
        articleId: { type: String, required: true },
        languageLabels: { type: Object, default: () => ({}) },
        dateFormat: { type: String, required: true },
        apiToken: { type: String, required: true },
    },

    data: () => ({
        article: null,
    }),

    watch: {
        articleId: {
            handler: 'fetchArticle',
            immediate: true,
        },
    },

    methods: {
        async fetchArticle() {
            this.article = null;
            const response = await apiRequest(
                `article/${this.articleId}`,
                {
                    include: [ 'openingTimes' ],
                },
                undefined,
                undefined,
                this.apiToken,
            );
            this.article = response.payload;
        },
    },
};
</script>
