<template>
  
  <!-- Loading -->
  <div
    v-if="props.loading && items.length==0"
    class="d-flex align-center justify-center"
    style="height:400px;"
  >
    <div>
      <div class="text-disabled text-center" v-html="props.textLoading"></div>
      <v-progress-linear indeterminate />
    </div>
  </div>

  <!-- Empty -->
  <div
    v-if="!props.loading && items.length==0"
    class="d-flex align-center justify-center"
    style="height:400px;"
  >
    <div>
      <div class="text-disabled text-center" v-html="props.textEmpty"></div>
      <a
        v-if="props.refresh"
        href="javascript:;"
        @click="props.refresh"
        class="text-disabled text-center d-block"
      >Refresh</a>
    </div>
  </div>
  
  <!-- Loaded -->
  <div v-if="items.length>0" :style="{ opacity: props.loading ? .5 : 1 }">
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  items: {
    type: [ Array, Object ],
    default: () => ([]),
  },
  refresh: {
    type: Function,
    default: null,
  },
  textLoading: {
    type: String,
    default: 'Loading',
  },
  textEmpty: {
    type: String,
    default: 'Empty',
  },
});

const items = Vue.computed(() => {
  if (Array.isArray(props.items)) {
    return props.items;
  }

  if (props.items!==null && typeof props.items=='object') {
    return Object.entries(props.items);
  }

  return [];
});
</script>