<template>
  <div>
    <Back
      :href="{
        name: 'ClubsPage',
        params: {
          slug: $route.params.slug
        }
      }"
      size="l"
    >
      {{ $_tc('back', [clubsTitle]) }}
    </Back>

    <TemplateContainer size="l" class="main-content">
      <Title :style="{ 'text-align': 'center' }" tag="h2" class="mb-xxl">
        {{ $_tc('title', [clubsTitle]) }}
      </Title>

      <Directory
        :static-data="fetchedData[0].users.data"
        :headers="headers"
        :fields="requestFields"
        :request-filters="requestFilters"
        :rows="scaffoldRow"
        class="mt-xxl"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { markRaw } from 'vue'

import { Title, Avatar } from 'inside-collection/atoms'
import Back from '@inside-commons/components/lib/Back'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Directory from '@inside-users/components/lib/Directory'

import { http } from '@inside-library/helpers/Http'

export default {
  name: 'ClubsMembersPage',
  $_i18nRootPath: 'customs.CLUBS_MEMBERS_PAGE',
  components: {
    Back,
    TemplateContainer,
    Title,
    Directory,
    Avatar
  },
  props: {
    fetchedData: {
      type: Array
    }
  },
  data() {
    return {
      clubsTitle: null,
      requestFields: [
        {
          users: [
            'uuid',
            'firstname',
            'lastname',
            'image',
            {
              business: ['title', 'uuid']
            },
            'function'
          ]
        }
      ],
      requestFilters: {
        'status:eq': 1,
        'is_maintenance:eq': 0,
        sort: 'lastname:asc'
      }
    }
  },
  computed: {
    headers() {
      return [
        {},
        {
          value: this.$_tr('headers.firstname'),
          sortable: true,
          key: 'firstname'
        },
        {
          value: this.$_tr('headers.lastname'),
          sortable: true,
          key: 'lastname',
          default: true
        },
        { value: this.$_tr('headers.function') },
        { value: this.$_tr('headers.business') }
      ]
    }
  },
  async beforeMount() {
    this.clubsTitle = await this.getClubsTitle()
  },
  methods: {
    async getClubsTitle() {
      try {
        const { data } = await http.get('content/clubs', {
          fields: ['uuid', 'title'],
          filters: {
            'slug:eq': this.$route.params.slug
          }
        })

        return data[0].title
      } catch (err) {
        throw new Error(err)
      }
    },
    scaffoldRow(fields) {
      return [
        {
          id: 'image',
          class: 'image',
          tag: markRaw(Avatar),
          data: { image: this.$_getContentImage(fields.image), size: 'xs' },
          cellOptions: { width: '45px' }
        },
        {
          id: 'firstname',
          class: 'firstname',
          value: fields.firstname
        },
        {
          id: 'lastname',
          class: 'lastname',
          value: fields.lastname
        },
        {
          id: 'function',
          class: 'function',
          value: fields.function
        },
        {
          id: 'business',
          class: 'business',
          value: this.getCheckedData(fields, ['business', 'data'])
            .map(({ title }) => title)
            .join(', ')
        }
      ]
    }
  }
}
</script>
