<script setup>
import AddIMEIForm from "@/components/imports/AddIMEIForm.vue";
import ImportData from "@/components/parameter/ImportData.vue";
import { remove } from "es-toolkit";

const props = defineProps({
  variant: Object,
});
const store = useStore();
const { $getdata, $snackbar } = useNuxtApp();
const emit = defineEmits(["close"]);

const isLoading = ref(false);
const imeis = ref([]);
const selectedImeis = ref([]);

function toggleSelected(imeiRec) {
  if (
    store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
    selectedImeis.value.find((i) => i.imei === imeiRec.imei)
  ) {
    remove(selectedImeis.value, (i) => i.imei === imeiRec.imei);
  } else {
    selectedImeis.value.push(imeiRec);
  }
}

function addToCart() {
  store.selectedImeis = [...store.selectedImeis, ...selectedImeis.value];
  $snackbar(`Thêm ${selectedImeis.value.length} sản phẩm vào giỏ hàng`, "Success");
  emit("close");
}

async function fetchImeis() {
  isLoading.value = true;
  const imeisFetched = await $getdata("IMEI", {
    filter: { variant: props.variant.id },
  });

  imeis.value = imeisFetched.filter((imeiRec) => !store.selectedImeis.find((i) => i.imei === imeiRec.imei));
  isLoading.value = false;
}
onMounted(fetchImeis);
</script>

<template>
  <div
    v-if="isLoading"
    class="is-flex is-justify-content-center"
  >
    <Icon
      name="svg-spinners:180-ring-with-bg"
      :size="26"
      class="has-text-grey-light"
    />
  </div>
  <div v-else-if="imeis.length === 0">
    <p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI có sẵn nào.</p>
    <div class="block">
      <AddIMEIForm
        :variant="variant"
        @created="fetchImeis"
      />
    </div>
    <div class="block">
      <ImportData
        code="imeis"
        @close="fetchImeis"
      />
    </div>
  </div>
  <template v-else>
    <table class="table is-hoverable is-fullwidth mb-2 fs-13">
      <thead>
        <tr>
          <th></th>
          <th>STT</th>
          <th>IMEI</th>
          <th>Trạng thái</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(imeiRec, i) in imeis"
          :key="imeiRec.id"
          class="is-clickable"
          :class="selectedImeis.find((i) => i.imei === imeiRec.imei) && 'is-selected'"
          @click="toggleSelected(imeiRec)"
        >
          <td class="is-narrow">
            <label class="checkbox">
              <input
                type="checkbox"
                :checked="selectedImeis.find((i) => i.imei === imeiRec.imei)"
              />
            </label>
          </td>
          <td class="is-narrow">{{ i + 1 }}</td>
          <td class="is-family-monospace">{{ imeiRec.imei }}</td>
          <td>
            <span :class="['tag is-light', imeiRec.deleted ? 'is-danger' : 'is-success']">{{
              imeiRec.deleted ? "Không có sẵn" : "Có sẵn"
            }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="is-flex is-justify-content-end">
      <button
        @click="addToCart"
        class="button is-primary"
        :disabled="selectedImeis.length === 0"
      >
        <span class="icon">
          <Icon
            name="material-symbols:add-rounded"
            :size="18"
          />
        </span>
        <span>
          <span>Thêm vào giỏ</span>
          <span v-if="selectedImeis.length > 0"> ({{ selectedImeis.length }})</span>
        </span>
      </button>
    </div>
  </template>
</template>
<style scoped>
.table tr.is-selected {
  --bulma-table-row-active-background-color: var(--bulma-primary-95);
  color: inherit;
}
</style>
