<template>
  <v-row
    justify="center"
    align="start"
    color="page-background-color fill-height header-row"
  >
    <v-col cols="12" sm="12" md="11" lg="12" xl="12">
      <v-row no-gutters class="mb-4">
        <v-col cols="auto">
          <v-btn variant="text" color="primary" class="text-none" @click="back">
            <v-icon left>mdi-arrow-left</v-icon>
            Back
          </v-btn>
        </v-col>
      </v-row>
      <v-card class="pa-5 position-relative rounded-lg">
        <!-- Stock Information -->
        <v-row class="pt-2">
          <v-col cols="12">
            <v-row>
              <v-col cols="6">
                <span class="text-fontgray font-weight-regular text-body-2"
                  >Name</span
                >
                <div
                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
                >
                  {{ supply.name || "N/A" }}
                </div>
              </v-col>
              <v-col cols="6">
                <span class="text-fontgray font-weight-regular text-body-2"
                  >Unit of Measurement</span
                >
                <div
                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
                >
                  {{ supply.unitOfMeasurement || "N/A" }}
                </div>
              </v-col>
            </v-row>

            <v-row class="mt-2">
              <v-col cols="6">
                <span class="text-fontgray font-weight-regular text-body-2"
                  >Quantity</span
                >
                <div
                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
                >
                  {{ supply.qty || "N/A" }}
                </div>
              </v-col>
              <v-col cols="6">
                <span class="text-fontgray font-weight-regular text-body-2"
                  >Remarks</span
                >
                <div
                  class="text-subtitle-1 text-primary-text font-weight-regular mt-1"
                >
                  {{ supply.remarks || "N/A" }}
                </div>
              </v-col>
            </v-row>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12">
            <v-divider></v-divider>
          </v-col>
        </v-row>

        <!-- Stock Movement Table -->
        <v-row no-gutters class="mt-4">
          <v-col cols="12">
            <TableMain
              title="Stock History"
              :items="stocks"
              :headers="headers"
              :loading="loading"
              :show-header="true"
              v-model:page="page"
              :pages="pages"
              :pageRange="pageRange"
              no-data-text="No stock records found."
              @refresh="getStockBySupplyIdRefresh"
            >
              <template #item.createdAt="{ item }">
                {{ formatDate(item.createdAt) }}
              </template>

              <template #item.in="{ item }">
                {{ item.in || 0 }}
              </template>

              <template #item.out="{ item }">
                {{ item.out || 0 }}
              </template>

              <template #item.balance="{ item }">
                {{ item.balance || 0 }}
              </template>
            </TableMain>
          </v-col>
        </v-row>
      </v-card>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
import useEquipment from "../composables/useEquipment";
import useStock from "../composables/useStock";
import useUtils from "../composables/useUtils";

const props = defineProps({
  orgId: { type: String, default: "" },
  site: { type: String, default: "" },
  serviceType: { type: String, default: "" },
});

const { formatDate, back } = useUtils();

const title = ref("Stock");

const supply = ref({
  name: "",
  unitOfMeasurement: "",
  qty: 0,
  remarks: "",
});

const { getEquipmentById } = useEquipment();

const supplyId = useRoute().params.id as string;

const { data: getEquipmentByIdReq } = await useLazyAsyncData(
  `get-equipment-by-id-${supplyId}`,
  () => getEquipmentById(supplyId)
);

watchEffect(() => {
  if (getEquipmentByIdReq?.value) {
    supply.value = getEquipmentByIdReq.value as any;
  }
});

const stocks = ref([]);
const page = ref(1);
const pages = ref(0);
const pageRange = ref("-- - -- of --");
const headers = [
  { title: "Created At", value: "createdAt" },
  { title: "In", value: "in" },
  { title: "Out", value: "out" },
  { title: "Balance", value: "balance" },
];

const { getStockBySupply } = useStock();

const {
  data: getStockBySupplyIdReq,
  refresh: getStockBySupplyIdRefresh,
  pending: loading,
} = await useLazyAsyncData(
  `get-stock-by-supply-id-${supplyId}-page-${page}`,
  () => getStockBySupply(props.site, supplyId, page.value, "", 10, props.serviceType),
  {
    watch: [page, () => props.site, () => supplyId],
  }
);

watchEffect(() => {
  if (getStockBySupplyIdReq.value) {
    stocks.value = getStockBySupplyIdReq.value.items;
    pages.value = getStockBySupplyIdReq.value.pages;
    pageRange.value = getStockBySupplyIdReq.value.pageRange;
  }
});
</script>

<style scoped>
.text-fontgray {
  color: #7e7e7e;
}

:deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}

:deep() .v-table .v-table__wrapper > table > tbody > tr > td:not(:last-child),
.v-table .v-table__wrapper > table > tbody > tr > th:not(:last-child) {
  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
</style>
