<script setup lang="ts">
import { useMutation } from '@vue/apollo-composable';
import { ConnectMessengerDocument, RegisterSelfDocument } from '~/composables/graphql/generated';

const companyName = ref('');
const inn = ref('');
const contactName = ref('');
const email = ref('');
const channelId = ref('');
const channelType = ref<'TELEGRAM' | 'MAX'>('TELEGRAM');

const registerMutation = useMutation(RegisterSelfDocument);
const messengerMutation = useMutation(ConnectMessengerDocument);

const message = ref('');

function register() {
  registerMutation.mutate({
    input: {
      companyName: companyName.value,
      inn: inn.value || null,
      contactName: contactName.value,
      email: email.value,
    },
  }).then(() => {
    message.value = 'Заявка на регистрацию отправлена менеджеру';
  });
}

function connectMessenger() {
  messengerMutation.mutate({
    input: {
      type: channelType.value,
      channelId: channelId.value,
    },
  }).then(() => {
    message.value = 'Канал уведомлений подключен';
  });
}
</script>

<template>
  <section class="space-y-6 max-w-2xl">
    <h1 class="text-2xl font-bold">Профиль и каналы уведомлений</h1>

    <div class="card bg-base-100 border border-base-300">
      <div class="card-body space-y-3">
        <h2 class="card-title">Самостоятельная регистрация</h2>
        <input v-model="companyName" type="text" placeholder="Компания" class="input input-bordered" />
        <input v-model="inn" type="text" placeholder="ИНН" class="input input-bordered" />
        <input v-model="contactName" type="text" placeholder="Контактное лицо" class="input input-bordered" />
        <input v-model="email" type="email" placeholder="Email" class="input input-bordered" />
        <button class="btn btn-primary" @click="register">Отправить заявку</button>
      </div>
    </div>

    <div class="card bg-base-100 border border-base-300">
      <div class="card-body space-y-3">
        <h2 class="card-title">Подключение мессенджера</h2>
        <select v-model="channelType" class="select select-bordered">
          <option value="TELEGRAM">Telegram</option>
          <option value="MAX">Max</option>
        </select>
        <input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered" />
        <button class="btn btn-secondary" @click="connectMessenger">Подключить канал</button>
      </div>
    </div>

    <div v-if="message" class="alert alert-success">{{ message }}</div>
  </section>
</template>
