<script setup>
import { useInvoices } from "~/components/orders/composables/useInvoices";

const props = defineProps({
  id: Number,
  code: String,
  name: String,
  en: String,
  color: String,
  index: Number,
});

const { invoices, invoicesByStatus } = useInvoices();

const invoiceMatchCount = computed(() => {
  if (!props.code) return 0;
  if (!invoicesByStatus.value[props.code]) return 0;
  return invoicesByStatus.value[props.code].length;
});
const progressVal = computed(() => (invoiceMatchCount.value * 100) / (invoices.value.length || 1));
const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
</script>
<template>
  <div class="is-flex-grow-1">
    <div class="is-flex is-justify-content-space-between">
      <p :class="`has-text-${color}-40`">{{ name }}</p>
      <p :class="['fs-18 font-bold', `has-text-${color}-30`]">{{ invoiceMatchCount }}</p>
    </div>
    <progress
      :class="['progress is-small mt-2', `is-${color}`]"
      :value="progressVal"
      max="100"
    ></progress>
  </div>
  <div
    v-if="index < 3"
    class="is-flex is-justify-content-center is-align-items-center"
    style="width: 60px; height: 48px"
  >
    <Icon
      name="material-symbols:arrow-forward-rounded"
      :size="24"
      class="has-text-grey-70"
    />
  </div>
</template>
<style lang="scss" scoped>
$progress-value-background-color: "red";

.progress {
  --bulma-size-small: 0.5rem;
  background-color: v-bind(progressUnfilled);
}
</style>
