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

const email = ref('');
const companyName = ref('');
const token = ref('');

const createInvitation = useMutation(CreateInvitationDocument);

async function submit() {
  const result = await createInvitation.mutate({ input: { email: email.value, companyName: companyName.value, expiresInDays: 7 } });
  token.value = result?.data?.createInvitation.token ?? '';
}
</script>

<template>
  <section class="space-y-4 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">
        <input v-model="email" type="email" class="input input-bordered" placeholder="Email клиента" />
        <input v-model="companyName" type="text" class="input input-bordered" placeholder="Компания" />
        <button class="btn btn-primary" @click="submit">Создать инвайт</button>
      </div>
    </div>
    <div v-if="token" class="alert alert-success">Токен: {{ token }}</div>
  </section>
</template>
