<template>
  <div>
    <v-data-table
      :headers="headers"
      :items-per-page="10"
      :items="items"
      sort-by="updated_at"
      :sort-desc="true"
      class="pa-4 secondary"
    >
      <template v-slot:item.informal_name="{ item }">
        <v-img
          :alt="item.informal_name"
          lazy-src="/images/product-placeholder.jpg"
          :src="computeImage(item)"
          contain
          height="60px"
          width="110px"
        />

        {{ item.informal_name }}
      </template>

      <template v-slot:item.updated_at="{ item }">
        {{ formatDate(item.updated_at) }}
      </template>

      <template v-slot:item.delegated="{ item }">
        {{ findUserById(item.user_id) }}
      </template>

      <template v-slot:item.actions="{ item }">
        <div class="view-container">
          <v-btn
            class="mx-4 white--text"
            style="height: 100%"
            :color="$vuetify.theme.dark ? 'info' : 'txt'"
            rounded
            depressed
            nuxt
            small
            :to="localePath(`/manager/members/${item.slug}`)"
            >{{ $t('general.view') }}</v-btn
          >
        </div>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  props: {
    items: {
      type: Array,
      required: true,
      default: [],
    },
    users: {
      type: Array,
      required: true,
      default: [],
    },
  },

  data() {
    return {
      headers: [
        {
          text: 'lid',
          value: 'informal_name',
        },
        {
          text: 'bijgewerkt op',
          value: 'updated_at',
        },
        {
          text: 'door',
          value: 'delegated',
        },
        {
          text: 'aangepast',
          value: 'changes',
        },
        {
          text: '',
          value: 'actions',
        },
      ],
    }
  },

  methods: {
    formatDate(date) {
      return dayjs(date).format('D MMM YYYY, HH:mm').toLowerCase()
    },

    computeImage(item) {
      if (item.logo.thumb) return item.logo.thumb
      return '/images/product-placeholder.jpg'
    },

    findUserById(id) {
      const unassigned = 'unassigned'
      if (!id) return unassigned
      const user = this.users.find((u) => u.id === id)
      if (user) return user.fullName
      return unassigned
    },
  },
}
</script>
