<template>
  <div>
    <CreateMessageDeliveryOption :label :method v-model="model" />

    <!-- Сообщение о недоступности -->
    <p
      v-if="telegramNotice"
      class="text-red-500 dark:text-red-400 my-2 outline outline-1 py-2 px-4"
    >
      Отправка в Telegram пока в разработке.<br />
      Этот способ отправки сообщений можно будет выбрать позже.
    </p>
  </div>
</template>

<script setup lang="ts">
import { type QRCodeDocument } from '@hereconnect/types'
import { type DeliveryOption, DELIVERY_METHOD_TELEGRAM } from '@/constants/deliveryOptions'
import { computed } from 'vue'

type DeliveryOptionTelegram = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_TELEGRAM }>

defineProps<{
  label: DeliveryOptionTelegram['label']
  method: DeliveryOptionTelegram['method']
}>()

defineEmits<{
  (e: 'change', value: Event): void
}>()

const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()

const telegramNotice = computed(() => {
  return model.value! === DELIVERY_METHOD_TELEGRAM
})
</script>
