<template>
  <v-list-item class="pa-0" three-line>
    <div>
      <span class="text-h4 text-md-h3">{{ start_day }}</span>
      <span class="text-h5 text-md-h4 grey--text text--darken-1">{{
        start_month
      }}</span>
    </div>
    <v-list-item-content>
      <v-list-item-title class="text-h6 text-md-h5 mt-0 mb-1">
        {{ event.summary }}
      </v-list-item-title>
      <v-list-item-subtitle
        v-if="event.description"
        class="text-subtitle-2 text-md-subtitle-1 mt-0 mb-2"
      >
        {{ event.description }}
      </v-list-item-subtitle>
      <v-list-item-subtitle
        class="thw-heading-font grey--text text--darken-1 font-weight-bold ma-0"
      >
        {{ data_string }}
      </v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { DateTime } from "luxon";
import Event from "./event";

@Component
export default class EventItem extends Vue {
  @Prop()
  private readonly event!: Event;

  private get start_day(): string {
    return this.event.start.toFormat("dd.");
  }

  private get start_month(): string {
    return this.event.start.toFormat("MM.");
  }

  private get data_string(): string {
    const locale_string = this.event.start
      .setLocale(navigator.language)
      .toLocaleString(DateTime.DATETIME_MED);

    // TODO: if applicable, include days and/or minutes.
    const duration_string = this.event.duration.shiftTo("hours").toHuman();

    return locale_string + " (" + duration_string + ")";
  }
}
</script>

<style>
</style>