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

const props = defineProps(['name', 'icon', 'color', 'endpoint']);

const value = ref(null)
const start_date = ref(null)
const end_date = ref(null)
const error = ref(null)

const getDaysBetweenDates = (startDate, endDate) => {
  const start = new Date(startDate)
  const end = new Date(endDate)
  const diffTime = Math.abs(end - start)
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
}

const fetchValue = async (endpoint) => {
  const response = await authenticatedRequest(endpoint).catch((error) => {
    console.error(error)
    error.value = error
  })
  // Check if the data structure is correct
  try {
    if (parseInt(response.data.data.total) === undefined || !response.data.data.start || !response.data.data.end) {
      throw new Error('Data structure is incorrect')
    }
  } catch (e) {
    console.error(e)
    error.value = e
    return
  }
  console.log(response.data.data)
  value.value = response.data.data.total
  start_date.value = response.data.data.start
  end_date.value = response.data.data.end
  return response.data
}

const renderCurrency = (value) => {
  return new Intl.NumberFormat('da-DK', { style: 'currency', currency: 'DKK' }).format(value)
}

onMounted(() => {
  fetchValue(props.endpoint)
})


</script>

<template>
  <div class="card">
    <div class="card-content">
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <i :class="icon" :style="{ color: props.color }" v-if="value !== null"></i>
            <i class="fas fa-exclamation-triangle has-text-warning" v-else-if="error"></i>
            <i class="fas fa-spinner fa-spin" v-else></i>
          </figure>
        </div>
        <div class="media-content">
          <p class="title is-4">{{ name }}</p>
          <p class="subtitle is-6" v-if="value !== null">{{ renderCurrency(value) }}</p>
          <p class="subtitle is-6" v-else-if="error">{{ error }}</p>
          <p class="subtitle is-6" v-else>Indlæses...</p>
        </div>
      </div>
    </div>
    <footer class="card-footer">
      <p class="card-footer-item">
        <span>
          <span class="icon" v-if="start_date && end_date">
            <i class="fas fa-calendar-day"></i>
          </span>
          <span v-if="start_date && end_date">
            {{ start_date }} - {{ end_date }} ({{ getDaysBetweenDates(start_date, end_date) === 0 ? '1 dag' : getDaysBetweenDates(start_date, end_date) + ' dage' }})
          </span>
          <span v-else-if="error">
            <span class="icon">
              <i class="fas fa-exclamation-triangle has-text-warning"></i>
            </span>
            <span>Der skete en fejl</span>
          </span>
          <span v-else>
            <span class="icon">
              <i class="fas fa-spinner fa-spin"></i>
            </span>
            <span>Indlæses...</span>
          </span>
        </span>
      </p>
    </footer>
  </div>
</template>

<style scoped>

</style>