<template>
  <Card class="w-11/12">
    <template #title>
      Loads
    </template>
    <template #content>
      <DataTable
          :value="loads"
          filterDisplay="row"
          paginator
          lazy
          :rows="50"
          :totalRecords="total"
          :loading="loading"
      >
        <template #empty>
          <div class="p-4">
            <p>No loads found</p>
          </div>
        </template>

        <Column field="cartridge" header="Name" :sortable="true" :showFilterMenu="false">
          <template #filter>
            <Select />
          </template>
          <template #body="{ data }">
            {{ data.cartridge }}
          </template>

        </Column>

        <Column field="bulletManufacturer" header="Bullet Manufacturer" :sortable="true" :showFilterMenu="false">
          <template #filter>
            <Select />
          </template>
          <template #body="{ data }">
            {{ data.bullet.manufacturer.name }}
          </template>
        </Column>
        <Column header="Bullet" :sortable="true" :showFilterMenu="false">
          <template #filter>
            <Select />
          </template>
          <template #body="{ data }">
            {{ data.bullet.name }}
            {{ data.bullet.weight }}gr
            .{{ data.bullet.diameter }}
          </template>
        </Column>
        <Column field="name" header="Primer Manufacturer" :sortable="true">
          <template #body="{ data }">
            {{ data.primer.manufacturer.name }}
          </template>
        </Column>
        <Column field="name" header="Primer" :sortable="true">
          <template #body="{ data }">
            {{ data.primer.name }}
          </template>
        </Column>

        <Column field="name" header="Powder Manufacturer" :sortable="true">
          <template #body="{ data }">
            {{ data.powder.manufacturer.name }}
          </template>
        </Column>

        <Column field="name" header="Powder" :sortable="true">
          <template #body="{ data }">
            {{ data.powder.name }}
          </template>
        </Column>

        <Column field="name" header="Powder Grs" :sortable="true">
          <template #body="{ data }">
            {{ data.powder_gr }}gr
          </template>
        </Column>

        <Column field="name" header="Edit">
          <template #body="{ data }">
            <Button size="small" text :icon="icons.edit" />
          </template>
        </Column>
      </DataTable>
    </template>
  </Card>
</template>
<script lang="ts">
import { Bullet } from '../../types/bullet'
import { Powder } from '../../types/powder'
import { Primers } from '../../types/primers'

interface LoadResponse {
  total: number
  results: Load[]
}

interface Load {
  id: string
  bullet: Bullet
  cartridge: string
  powder: Powder
  powder_gr: number
  primer: Primers
  col: number
}
</script>
<script lang="ts" setup>
import { defineAsyncComponent, onMounted, ref } from 'vue'
import { Response } from '../../types/Response'
import axios from 'axios'
import Column from 'primevue/column'
import { icons } from '../../lib/icons.ts'

const DataTable = defineAsyncComponent(() => import('primevue/datatable'))
const Card = defineAsyncComponent(() => import('primevue/card'))
const Button = defineAsyncComponent(() => import('primevue/button'))
const Select = defineAsyncComponent(() => import('primevue/select'))

const loads = ref<Load[]>([])
const total = ref(0)
const page = ref(1)
const loading = ref(true)

const fetchLoads = async () => {
  loading.value = true

  const resp = await axios.get<any, Response<LoadResponse>>(`${import.meta.env.VITE_API}/load`)

  loads.value = resp.data.payload.results
  total.value = resp.data.payload.total

  loading.value = false
}

onMounted(() => {
  fetchLoads()
})

</script>
