<template lang="pug">
  .calendar-column-wrapper.flex.flex-col
    .header.flex.flex-col.items-center.justify-center.top-0.pt-3.pb-10px
      span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
      span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
    .body.h-full.px-1.py-1
      calendar-record-card(
        v-for="record in filteredRecords",
        :key="record?.id",
        :record="record",
        :expanded-type="expandedDisplayType",
        :style="eventCardPosition(record.start, record.end)",
        @click="changeSelectedRecordId(record?.id)",
      )
    .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
      span.text-smm.color-grey 0 записей
</template>

<script>
import * as moment from "moment/moment";
import { columnMixin } from "@/pages/newCalendar/mixins/columnMixin.js";
export default {
  name: "CalendarColumn",
  mixins: [columnMixin],
  props: {
    date: Object,
    expandedDisplayType: Boolean,
  },
  computed: {
    filteredRecords() {
      return this.events.filter(
        (elem) =>
          moment.parseZone(elem.start).format("YYYY-MM-DD") ===
          this.date.format("YYYY-MM-DD")
      );
    },
  },
  methods: {
    transformDayName(name) {
      return name[0]?.toUpperCase() + name?.slice(1);
    },
  },
};
</script>

<style lang="sass" scoped>
@import "@/pages/newCalendar/sass/columnStyle.sass"
</style>
