<template>
    <div :class="bem()">
        <tag-component v-if="request.length" :text="request[0]" />
        <tooltip-component
            v-if="request.length > 1"
            title="Запрос"
            icon="bell"
            :class="bem('tooltip')"
        >
            <template v-slot:parent>
                <tag-component :text="countText" hoverable view="grey" />
            </template>
            <template v-slot:content>
                <div :class="bem('tooltip-content')">
                    <tag-component
                        v-for="text in request"
                        :key="text"
                        :text="text"
                    />
                </div>
            </template>
        </tooltip-component>
    </div>
</template>

<script setup lang="ts" bem-block="patient-request">
import { computed } from 'vue'

export type PatientRequestProps = {
    // FIXME change type on Request[]
    request: string
}

const props = defineProps<PatientRequestProps>()

const countText = computed(() => `+${props.request.length - 1}`)
</script>
