<script setup lang="ts">
import { computed } from 'vue';
import type { CalendarCell } from './types';
import CalendarItem from './CalendarItem.vue';

const props = defineProps({
  cells: {
    type: Array as () => CalendarCell[],
    required: true,
  },
})

// split the flat 42-cell array into 6 rows of 7
const rows = computed<CalendarCell[][]>(() => {
  const r: CalendarCell[][] = []
  for (let i = 0; i < 6; i++) r.push(props.cells.slice(i * 7, i * 7 + 7))
  return r
})
</script>

<template>
  <div class="calendarGrid card" style="padding: 1.25rem; display: flex; flex-flow: column;">
    <div style="margin: 0 0 0.75em 0;">
      <div v-for="i in 7" :key="i">
        <b :style="i >= 6 ? { color: 'red' } : null">{{ $t('universal-week-' + i) }}</b>
      </div>
    </div>

    <div v-for="(row, ri) in rows" :key="ri">
      <div
        v-for="(cell, ci) in row"
        :key="ci"
        :isCurrentMonth="cell.isCurrentMonth ? 'true' : 'false'"
      >
        <CalendarItem :cell="cell" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.calendarGrid > div:nth-child(n + 2) > div {
  border-top: 0 solid black;
  border-left: 0 solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;

  padding: 0.75em;

  display: flex;
  flex-flow: column;
  align-items: flex-start;

  overflow: hidden;
}

.calendarGrid > div:nth-child(n + 2) > div:nth-child(1) {
  border-left: 1px solid black;
}

.calendarGrid > div:nth-child(2) > div {
  border-top: 1px solid black;
}

.calendarGrid > div > div {
  flex-grow: 1;
  flex-basis: 0;
  flex-shrink: 0;

  overflow: hidden;
}

.calendarGrid > div > div[isCurrentMonth=false] {
  background: #d0d0d0;
}

.calendarGrid > div {
  display: flex;
  flex-flow: row;
}
</style>
