<template>
    <tb-opening-times-parser
        v-if="article"
        :opening-times-definition="article.openingTimes"
        opening-times-format="toubizV1"
    >
        <template #default="{ openingTimes }">
            <div class="tb-opening-times-extended-line-preview-live flex">
                <tb-opening-times-simple
                    v-if="openingTimes"
                    class="flex-shrink-0"
                    :opening-times="openingTimes"
                    :language-labels="languageLabels"
                    :date-format="dateFormat"
                />
                <div class="tb-opening-times-extended-line-preview-live__text ml-2 flex flex-col">
                    <span class="tb-opening-times-extended-line-preview-live__name">
                        {{ article.name }}
                    </span>
                    <tb-opening-times-line-preview
                        :opening-times="openingTimes"
                        :date-format="dateFormat"
                        :language-labels="languageLabels"
                    />
                </div>
            </div>
        </template>
    </tb-opening-times-parser>
</template>

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

export default {
    name: 'TbOpeningTimesExtendedLinePreviewLive',
    components: {
        TbOpeningTimesParser,
        TbOpeningTimesSimple,
        TbOpeningTimesLinePreview,
    },
    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>
