<template>
  <v-card xs12>
    <v-card-title primary-title>
      <h3 class="headline mb-0"><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('band', event.band.name)" medium title="Dölj">mdi-eye-off</v-icon>{{event.band.name}}</h3>
    </v-card-title>
    <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6><strong class="mr-1" v-text="$t('events.date')" />{{event.date}} ({{ weekday }} {{ daysUntil }})</v-flex>
        <v-flex xs12 sm6 v-if="event.time"><strong class="mr-1" v-text="$t('events.time')" />{{event.time}}</v-flex>
      </v-layout>
      <v-layout row wrap>
        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.hall')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.name}}</v-flex>
        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.city')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.city}}</v-flex>
        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.municipality')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.municipality}}</v-flex>
        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.state')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.state}}</v-flex>
      </v-layout>
      <v-layout row wrap v-for="distance in event.distances" :key="event.origin">
        <v-flex xs12 sm6>
          <v-icon>mdi-home</v-icon>
          <span><strong>{{distance.origin}}</strong></span>
        </v-flex>
        <v-flex xs12 sm6>
          <v-icon>mdi-car</v-icon>
          <span>{{distance.distance / 1000 | numeral('0,0.00')}} km</span>
          <v-icon>mdi-clock-outline</v-icon>
          <span>{{distance.duration}}</span>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
</template>

<script>
  import dayjs from 'dayjs'

  export default {
    props: {
      event: {
        type: Object,
        required: true
      },
      hasUser: {
        type: Boolean,
        required: true
      },
      toggleIgnore: {
        type: Function,
        required: true
      }
    },
    setup(props) {
      const time = (props.event.time || '').split('-')[0].replace('.', ':')
      const weekday = dayjs(props.event.date).format('dddd')
      const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
      return {
        weekday,
        daysUntil
      }
    },
  };
</script>
