<template>
  <section class="max-w-lg w-full">
    <p class="text-gray-600 mb-4 text-center">Выберите сообщение из списка или напишите своё:</p>

    <!-- Предустановленные сообщения -->
    <div v-if="presetMessages.length" class="mb-6">
      <div class="flex flex-col gap-3">
        <Button
          v-for="(message, index) in presetMessages"
          :key="index"
          class="p-button-outlined w-full text-left"
          :disabled="loading"
          @click="sendPresetMessage(message)"
        >
          {{ message }}
        </Button>
      </div>
    </div>

    <!-- Текстовое поле ввода с кнопкой -->
    <form @submit.prevent="sendCustomMessage" class="flex gap-2 items-center">
      <InputText
        id="customMessage"
        v-model="customMessage"
        class="flex-1"
        placeholder="Напишите сообщение"
        :disabled="loading"
      />
      <Button
        type="submit"
        icon="pi pi-send"
        class="p-button-md"
        :disabled="!customMessage.trim() || loading"
      />
    </form>

    <p v-if="success" class="text-green-500 mt-4 text-center">Сообщение отправлено!</p>
    <p v-if="error" class="text-red-500 mt-4 text-center">Ошибка: {{ error }}</p>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const { qr_code_uri, predefinedMessages } = defineProps<{
  qr_code_uri: string
  predefinedMessages: string[]
}>()

// Локальные состояния
const presetMessages = ref(predefinedMessages || [])
const customMessage = ref('')
const success = ref(false)
const error = ref<string | null>(null)
const loading = ref(false)

// Функция для отправки сообщения
async function sendMessage(message: string) {
  try {
    loading.value = true
    console.log({
      qr_code_uri,
      message: message.trim(),
    })

    success.value = true
    error.value = null
    customMessage.value = ''
  } catch {
    success.value = false
    error.value = 'Ошибка отправки сообщения'
  } finally {
    loading.value = false
  }
}

// Функция для отправки предустановленного сообщения
async function sendPresetMessage(message: string) {
  await sendMessage(message)
}

// Функция для отправки пользовательского сообщения
async function sendCustomMessage() {
  await sendMessage(customMessage.value)
}
</script>
