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

const withdrawalId = ref('');
const decision = ref<'APPROVE' | 'REJECT'>('APPROVE');
const reviewComment = ref('');
const resultStatus = ref('');

const review = useMutation(ReviewRewardWithdrawalDocument);

async function submit() {
  const result = await review.mutate({ input: { withdrawalId: withdrawalId.value, decision: decision.value, reviewComment: reviewComment.value } });
  resultStatus.value = result?.data?.reviewRewardWithdrawal.status ?? '';
}
</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="withdrawalId" class="input input-bordered" placeholder="ID заявки" />
        <select v-model="decision" class="select select-bordered">
          <option value="APPROVE">Approve</option>
          <option value="REJECT">Reject</option>
        </select>
        <input v-model="reviewComment" class="input input-bordered" placeholder="Комментарий" />
        <button class="btn btn-primary" @click="submit">Подтвердить</button>
      </div>
    </div>
    <div v-if="resultStatus" class="alert alert-success">Статус: {{ resultStatus }}</div>
  </section>
</template>
