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

const productName = ref('');
const quantity = ref(1);
const width = ref(100);
const thickness = ref(50);
const color = ref('прозрачный');

const { mutate, loading, onDone, onError } = useMutation(SubmitCalculationOrderDocument);
const success = ref('');
const errorMessage = ref('');

onDone((result) => {
  success.value = `Заявка ${result.data?.submitCalculationOrder.code} отправлена`;
  errorMessage.value = '';
});

onError((error) => {
  errorMessage.value = error.message;
  success.value = '';
});

function submit() {
  mutate({
    input: {
      productName: productName.value,
      quantity: Number(quantity.value),
      parameters: {
        width: Number(width.value),
        thickness: Number(thickness.value),
        color: color.value,
      },
    },
  });
}
</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">
        <label class="form-control">
          <span class="label-text">Название позиции</span>
          <input v-model="productName" type="text" class="input input-bordered" />
        </label>
        <label class="form-control">
          <span class="label-text">Количество</span>
          <input v-model="quantity" type="number" min="1" class="input input-bordered" />
        </label>
        <label class="form-control">
          <span class="label-text">Ширина</span>
          <input v-model="width" type="number" min="1" class="input input-bordered" />
        </label>
        <label class="form-control">
          <span class="label-text">Толщина</span>
          <input v-model="thickness" type="number" min="1" class="input input-bordered" />
        </label>
        <label class="form-control">
          <span class="label-text">Цвет</span>
          <input v-model="color" type="text" class="input input-bordered" />
        </label>

        <button class="btn btn-primary" :disabled="loading" @click="submit">Отправить менеджеру</button>
      </div>
    </div>

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