<template>
    <div class="tb-hours-detail">
        <h3>{{ translate('tableHeader') }}</h3>

        <ul class="tb-hours-detail__body">
            <dl class="tb-hours-detail__item" v-for="upcoming in upcomingOpeningTimes">
                <dt class="tb-hours-detail__item-day">
                    {{ $t('day.' + upcoming.weekday) }}
                </dt>
                <ul v-if="upcoming.times && upcoming.times.timeRanges.length > 0" class="tb-hours-detail__item-ranges">
                    <dl class="tb-hours-detail__item-range" v-for="timeRange in upcoming.times.timeRanges">
                        <dd class="tb-hours-detail__item-range-value">
                            {{ timeRange }}
                        </dd>
                        <dd v-if="timeRange.comment" class="tb-hours-detail__item-range-comment">
                            {{ timeRange.comment }}
                        </dd>
                    </dl>
                </ul>
                <dd v-else class="tb-hours-now__state--closed">
                    {{ translate('closed') }}
                </dd>
            </dl>
        </ul>
    </div>
</template>
<script>
export default {
    name :'TbOpeningTimesTable',

    props: {
        languageLabels: { type: Object, required: true },
        openingTimes: { type: Object, required: true },
        upcomingOpeningTimes: { type: Object, required: true },
    },

    methods: {
        translate(label, replacements = []) {
            let text = this.languageLabels[label] || label;
            for (const key of Object.keys(replacements)) {
                text = text.replace(new RegExp(`\\{${key}\\}`, 'g'), replacements[key]);
            }
            return text;
        },
    },
};
</script>
