<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  dateStr: string
}>()

defineEmits<{
  (e: 'addAllEntriesClicked'): void
}>()

const date = computed(() => getDate(props.dateStr))
const weekday = computed(() => getWeekday(date.value))

function getDate(dateStr: string): Date {
  const year = parseInt(dateStr.substring(0, 4), 10)
  const month = parseInt(dateStr.substring(5, 7), 10)
  const day = parseInt(dateStr.substring(8, 10), 10)
  return new Date(year, month - 1, day)
}

function getWeekday(date: Date): string {
  const names = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  return names[date.getDay()]
}
</script>
<template>
  <th>
    <div class="date-header-container">
      <div class="date-header-button">
        <span title="Add All Entries" @click="$emit('addAllEntriesClicked')">+</span>
      </div>
      <div>
        <span>{{ weekday }}</span>
        <br>
        <span>{{ date.toLocaleDateString() }}</span>
      </div>
    </div>
  </th>
</template>
<style scoped>
.date-header-container {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.date-header-button {
  float: right;
}

.date-header-button:hover {
  cursor: pointer;
}
</style>
