<script setup>
import InputNumber from "@/components/common/InputNumber.vue";
import { omitBy } from "es-toolkit";

const props = defineProps({
  productId: Number,
});

const emit = defineEmits(["created"]);

const { $empty, $insertapi } = useNuxtApp();
const isPending = ref(false);
const body = ref({
  product: props.productId,
  price: null,
  internal_storage: null,
  ram: null,
  color: null,
  note: "",
});

watch(
  () => props.productId,
  (newVal) => {
    body.value.product = props.productId;
  },
);

function selected(field, data) {
  if (data === null || field === "price") {
    body.value[field] = data;
  } else {
    body.value[field] = data.id;
  }
}

async function createProductVariant() {
  isPending.value = true;
  const trimmedBody = omitBy(body.value, $empty);
  const res = await $insertapi("Product_Variant", trimmedBody);
  isPending.value = false;
  if (res !== "error") {
    emit("created");
  }
}
</script>

<template>
  <div>
    <h1 class="subtitle">Thêm phiên bản</h1>
    <form class="fixed-grid has-12-cols">
      <div class="grid">
        <div class="cell is-col-span-3">
          <div class="field">
            <label class="label">Đơn giá</label>
            <div class="control">
              <InputNumber
                v-bind="{
                  record: body,
                  attr: 'price',
                  placeholder: 'Đơn giá',
                  unit: 'VND',
                }"
                @number="selected('price', $event)"
              />
            </div>
          </div>
        </div>
        <div class="cell is-col-span-3">
          <div class="field">
            <label class="label">Màu sắc</label>
            <SearchBox
              v-bind="{
                api: 'Color',
                field: 'name',
                column: ['name'],
                first: true,
                clearable: true,
                placeholder: 'Màu sắc',
                addon: {
                  component: 'imports/addons/AddColor',
                  width: '60%',
                  height: 'auto',
                  title: 'Thêm màu sắc',
                },
              }"
              @option="selected('color', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-3">
          <div class="field">
            <label class="label">RAM</label>
            <SearchBox
              v-bind="{
                api: 'RAM',
                field: 'code',
                column: ['code'],
                first: true,
                clearable: true,
                placeholder: 'RAM',
                addon: {
                  component: 'imports/addons/AddRAM',
                  width: '60%',
                  height: 'auto',
                  title: 'Thêm RAM',
                },
              }"
              @option="selected('ram', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-3">
          <div class="field">
            <label class="label">Bộ nhớ trong</label>
            <SearchBox
              v-bind="{
                api: 'Internal_Storage',
                field: 'code',
                column: ['code'],
                first: true,
                clearable: true,
                placeholder: 'Bộ nhớ trong',
                addon: {
                  component: 'imports/addons/AddInternalStorage',
                  width: '60%',
                  height: 'auto',
                  title: 'Thêm bộ nhớ trong',
                },
              }"
              @option="selected('internal_storage', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-12">
          <div class="field">
            <label class="label">Ghi chú</label>
            <textarea
              v-model.trim="body.note"
              class="textarea"
              name="note"
              placeholder="Ghi chú"
              rows="1"
            ></textarea>
          </div>
        </div>
        <div class="cell is-col-span-12">
          <button
            :class="['button is-primary', { 'is-loading': isPending }]"
            :disabled="Object.values(body).every($empty)"
            @click.prevent="createProductVariant"
          >
            <span class="icon">
              <Icon
                name="material-symbols:add-rounded"
                :size="18"
              />
            </span>
            <span>Thêm phiên bản</span>
          </button>
        </div>
      </div>
    </form>
  </div>
</template>
