<script lang='ts' setup>
import type { GenericObject } from "vee-validate";
import type { RwaIssuanceCategoriesData, RwaIssuanceProductBody } from "@/api/types";
import { toTypedSchema } from "@vee-validate/yup";
import { ErrorMessage, Field, Form } from "vee-validate";
import { useI18n } from "vue-i18n";
import * as yup from "yup";

const props = defineProps<{
  initialData: RwaIssuanceProductBody["product"];
  categories: RwaIssuanceCategoriesData | null;
}>();
const emit = defineEmits<{
  (e: "next", values: GenericObject): void;
}>();
const { t } = useI18n();

const schema = toTypedSchema(
  yup.object({
    name: yup.string().required(t("asset.issue.apply.validation.nameRequired")),
    code: yup.string().required(t("asset.issue.apply.validation.codeRequired")),
    categoryId: yup.string().required(t("asset.issue.apply.validation.categoryRequired")),
  }),
);

function handleSubmit(values: GenericObject) {
  emit("next", values);
}
</script>

<template>
  <Form
    :validation-schema="schema" :initial-values="initialData"
    @submit="handleSubmit"
  >
    <div class="space-y-5">
      <div>
        <Field name="name" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              :label="t('asset.issue.apply.productName')"
              :placeholder="t('asset.issue.apply.enterProductName')"
            />
          </template>
        </Field>
        <ErrorMessage name="name" />
      </div>

      <div>
        <Field name="code" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              :label="t('asset.issue.apply.productCode')"
              :placeholder="t('asset.issue.apply.enterProductCode')"
            />
          </template>
        </Field>
        <ErrorMessage name="code" />
      </div>

      <div>
        <Field name="categoryId" type="text">
          <template #default="{ field }">
            <ion-select
              class="ui-select"
              interface="action-sheet"
              toggle-icon=""
              v-bind="field"
              :label="t('asset.issue.apply.productType')"
              :placeholder="t('asset.issue.apply.chooseProductType')"
            >
              <ion-select-option v-for="item in categories?.data" :key="item.id" :value="item.id">
                {{ item.name }}
              </ion-select-option>
            </ion-select>
          </template>
        </Field>
        <ErrorMessage name="categoryId" />
      </div>

      <div>
        <Field name="estimatedValue" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              type="text"
              inputmode="numeric"
              :label="t('asset.issue.apply.productValue')"
              :placeholder="t('asset.issue.apply.enterProductValue')"
            />
          </template>
        </Field>
        <ErrorMessage name="estimatedValue" />
      </div>

      <div>
        <Field name="proofDocuments" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              :label="t('asset.issue.apply.assetProof')"
              :placeholder="t('asset.issue.apply.enterAssetProof')"
            />
          </template>
        </Field>
        <ErrorMessage name="proofDocuments" />
      </div>

      <div>
        <Field name="totalSupplyLimit" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              inputmode="numeric"
              :label="t('asset.issue.apply.totalSupplyLimit')"
              :placeholder="t('asset.issue.apply.enterTotalSupplyLimit')"
            />
          </template>
        </Field>
        <ErrorMessage name="totalSupplyLimit" />
      </div>

      <ion-button type="submit" expand="block">
        {{ t('asset.issue.apply.next') }}
      </ion-button>
    </div>
  </Form>
</template>

<style lang='css' scoped></style>
