<script setup>
import { onMounted, ref } from "vue";
import { useForm, api, apiURL } from "@Services/Api";

import Input from "@Holos/Form/Input.vue";
import Textarea from "@Holos/Form/Textarea.vue";
import Selectable from "@Holos/Form/Selectable.vue";

/** Eventos */
const emit = defineEmits(['concept-created']);

const form = useForm({
  direction_id: null,
  unit_id: null,
  short_name: "",
  name: "",
  legal_instrument: "",
  article: "",
  content: "",
  min_amount_uma: "",
  max_amount_uma: "",
  min_amount_peso: "",
  max_amount_peso: "",
  unit_cost_uma: "",
  unit_cost_peso: "",
});

const addresses = ref([]);
const units = ref([]);

/** Cargar cosas */
onMounted(async () => {
  api.get(apiURL('directions'), {
    onSuccess: (data) => {
      addresses.value = data.models?.data || data.data || [];
    }
  });

  api.get(apiURL('units'), {
    onSuccess: (data) => {
      units.value = data.models?.data || data.data || [];
    }
  });
});

/** Métodos */
const handleSubmit = () => {
  const transformedData = {
    direction_id: typeof form.direction === 'object' ? form.direction.id : Number(form.direction_id),
    unit_id: form.unit ? (typeof form.unit === 'object' ? form.unit.id : Number(form.unit)) : null,
    short_name: form.short_name,
    name: form.name,
    legal_instrument: form.legal_instrument,
    article: form.article,
    content: form.content,
    min_amount_uma: form.min_amount_uma ? Number(form.min_amount_uma) : null,
    max_amount_uma: form.max_amount_uma ? Number(form.max_amount_uma) : null,
    min_amount_peso: form.min_amount_peso ? Number(form.min_amount_peso) : null,
    max_amount_peso: form.max_amount_peso ? Number(form.max_amount_peso) : null,
    unit_cost_uma: form.unit_cost_uma ? Number(form.unit_cost_uma) : null,
    unit_cost_peso: form.unit_cost_peso ? Number(form.unit_cost_peso) : null,
  };

  emit('concept-created', transformedData);
};
</script>

<template>
  <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-10">
    <h3 class="text-xl font-semibold mb-4 text-gray-800">
      {{ $t('concept.create.title') }}
    </h3>

    <form @submit.prevent="handleSubmit">
      <div class="mb-5 grid grid-cols-2 gap-4">
        <Selectable
          v-model="form.direction"
          label="name"
          value="id"
          :title="$t('concept.direction')"
          :options="addresses"
          required
        />
        <Input
          v-model="form.short_name"
          class="col-span-2"
          :id="$t('concept.shortName')"
          type="text"
          :onError="form.errors.short_name"
          required
        />
      </div>
      <Input
        v-model="form.name"
        class="col-span-2"
        :id="$t('concept.name')"
        type="text"
        :onError="form.errors.name"
        required
      />
      <div class="mb-5 grid grid-cols-2 gap-4 py-2">
        <Input
          v-model="form.legal_instrument"
          class="col-span-2"
          :id="$t('concept.legal')"
          type="text"
          :onError="form.errors.legal_instrument"
          required
        />
        <Input
          v-model="form.article"
          class="col-span-2"
          :id="$t('concept.article')"
          type="text"
          :onError="form.errors.article"
          required
        />
      </div>
      <Textarea
        v-model="form.content"
        class="col-span-2"
        :id="$t('concept.description')"
        :onError="form.errors.content"
        required
      />
      <div class="mb-5 grid grid-cols-2 gap-4 py-2">
        <Input
          v-model="form.min_amount_uma"
          :id="$t('concept.minimumAmountUma')"
          type="number"
          step="0.01"
          :onError="form.errors.min_amount_uma"
        />
        <Input
          v-model="form.max_amount_uma"
          :id="$t('concept.maximumAmountUma')"
          type="number"
          step="0.01"
          :onError="form.errors.max_amount_uma"
        />
      </div>
      <div class="mb-5 grid grid-cols-2 gap-4 py-2">
        <Input
          v-model="form.min_amount_peso"
          :id="$t('concept.minimumAmountPeso')"
          type="number"
          step="0.01"
          :onError="form.errors.min_amount_peso"
        />
        <Input
          v-model="form.max_amount_peso"
          :id="$t('concept.maximumAmountPeso')"
          type="number"
          step="0.01"
          :onError="form.errors.max_amount_peso"
        />
      </div>
      <hr class="my-4 border-gray-300" />
      <h4 class="text-lg font-semibold mb-4 text-gray-700">
        {{ $t('concept.tabulator') }}
      </h4>
      <div class="mb-5 grid grid-cols-3 gap-4 py-2">
        <Selectable
          v-model="form.unit"
          label="name"
          value="id"
          :title="$t('concept.sizeUnit')"
          :options="units"
        />
        <Input
          v-model="form.unit_cost_uma"
          :id="$t('concept.costUnitUma')"
          type="number"
          step="0.01"
          :onError="form.errors.unit_cost_uma"
        />
        <Input
          v-model="form.unit_cost_peso"
          :id="$t('concept.costUnitPeso')"
          type="number"
          step="0.01"
          :onError="form.errors.unit_cost_peso"
        />
      </div>
      <div class="mb-3 p-7 flex justify-center">
        <button
          type="submit"
          :disabled="form.processing"
          class="w-1/4 bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors disabled:opacity-50"
        >
          {{ form.processing ? 'Guardando...' : $t('save') }}
        </button>
      </div>
    </form>
  </div>
</template>
