<template>
    <div class="tb-map-info-window-wrapper">
        <div class="tb-map-info-window">
            <button class="tb-map-info-window__close-button" @click="$emit('close')">
                <svg class="c-icon" aria-hidden="true">
                    <use xlink:href="#tb-map-close" />
                </svg>
            </button>

            <div class="tb-map-info-window__image-wrapper" v-if="marker.image">
                <img :src="marker.image.url" :alt="marker.image.alt">
            </div>

            <div class="tb-map-info-window__text">
                <h2 class="tb-map-info-window__title">
                    {{ marker.title }}
                </h2>

                <div class="tb-map-info-window__attribute">
                    {{ marker.categoryTitle }}

                    <template v-if="marker.tour">
                        <template v-if="marker.tour.difficultyRating">
                            {{ lang[`difficultyRating${marker.tour.difficultyRating}`] }}
                        </template>
                    </template>
                </div>

                <tb-opening-times-parser
                    v-if="marker.detail.openingTimes"
                    :opening-times-definition="marker.detail.openingTimes.definitions"
                    :opening-times-format="marker.detail.openingTimes.format"
                >
                    <template v-slot="{ openingTimes }">
                        <p>
                            <tb-opening-times-line-preview
                                :opening-times="openingTimes"
                                :date-format="lang.openingTimes.dateFormat"
                                :language-labels="lang.openingTimes || {}"
                            />
                        </p>
                    </template>
                </tb-opening-times-parser>
            </div>

            <div class="tb-map-info-window__button-wrapper">
                <a
                    v-if="marker.url"
                    :href="marker.url"
                    :target="linkTarget"
                    class="tb-map-info-window__button"
                >

                    {{ lang.moreLink }}
                </a>
            </div>
        </div>
    </div>
</template>
<script>
import TbOpeningTimesLinePreview from '../opening-times/opening-times-line-preview.vue';
import TbOpeningTimesParser from '../opening-times/opening-times-parser.vue';
export default {
    name: 'TbInfoWindow',
    components: { TbOpeningTimesParser, TbOpeningTimesLinePreview },
    props: {
        marker: { type: Object, required: true },
        lang: { type: Object, required: true },
        linkTarget: { type: String, required: true },
    },
};
</script>
