<script setup>
import {ref, defineProps, defineEmits } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const default_options = {
  module: {
    name: SessionUser.objects.global.language.no_data,
    icon: 'fas fa-file-invoice-dollar',
    link: '#',
    color: 'has-text-grey',
  },
}

const default_count = {
  /**
   * @property {string} label - Label for the count
   * @property {number} value - Value of the count
   * @property {string} icon - Icon class for the count
   * @property {string} color - Color class for the count
   */
    label: 'Total',
    value: 0,
    icon: 'fas fa-file-invoice-dollar',
    color: 'has-text-info',
}

// Define props
const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
  count: {
    type: Object,
    required: true,
  },
  loading: {
    type: Boolean,
    required: true,
    default: false,
  },
  onClick: {
    type: Function|undefined,
    required: false,
    default: undefined,
  },
})

// Emit refresh event
const emit = defineEmits(['refresh'])

// Has click action
const hasClickAction = () => {
  return props.onClick !== undefined;
}

// Define the click event
const click = () => {
  if (hasClickAction()) {
    props.onClick();
  }
}

// Default options and counts
const options = ref({
  ...default_options,
  ...props.options,
})

const getCounts = () => {
  return {
    ...default_count,
    ...props.count,
  }
}

</script>

<template>
  <div class="card">
    <header class="card-header">
      <div class="card-header-title">
        <nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
          <ul>
            <li>
              <a :href="options.module.link" :class="getCounts().color">
                <span class="icon is-small">
                  <i :class="getCounts().icon"></i>
                </span>
                <span class="is-hidden-mobile"> {{ getCounts().label }}</span>
              </a>
            </li>
            <li>
              <a :href="options.module.link" :class="options.module.color">
                <!--<span class="icon is-small">
                  <i :class="options.module.icon"></i>
                </span>-->
                <span class="is-hidden-mobile">
                  {{ options.module.name }}
                </span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <span class="card-header-icon">
        <!-- Loading spinner -->
        <span v-if="loading" class="icon is-small">
          <i class="fas fa-spinner fa-spin"></i>
        </span>
        <!-- Click to refresh icon -->
        <span v-else class="icon is-small">
          <i class="fas fa-sync-alt" @click="$emit('refresh')"></i>
        </span>
      </span>
    </header>
    <div class="card-content">
      <div class="content">
        <p :class="getCounts().color">
          <span :class="getCounts().icon"></span>
          {{ getCounts().label }}: {{ getCounts().value }}
        </p>
      </div>
    </div>
    <footer class="card-footer">
      <a
          v-if="hasClickAction()"
          href="#"
          class="card-footer-item"
          @click="click()"
          >
      View
      </a>
      <a
          v-if="!hasClickAction()"
          href="#"
          class="card-footer-item"
          >
        {{SessionUser.objects.global.language.no_data}}
      </a>
    </footer>
  </div>
</template>

<style scoped>

</style>