<template>
  <div class="restaurants-my-orders-container restaurants-listing">
    <BaseText
      v-if="credits"
      class="credits mb-l"
      v-html="$_tc('credits', [+(credits || 0).toFixed(2)])"
    />

    <filters-container :id="filterId" :filters="filters" />

    <table-listing
      id="restaurant-my-orders-listing"
      :fields="requestFields"
      :filters="requestFilters"
      :filter-id="filterId"
      :headers="headers"
      :rows="scaffoldRows"
      :on-row-click="handleRowClick"
      :items-per-page="10"
      endpoint="content/dishes_orders"
    >
      <template #no-data>{{ $_tr('empty') }}</template>
    </table-listing>
  </div>
</template>

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

import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'MyOrdersListing',
  $_i18nRootPath: 'customs.RESTAURANTS.MY_ORDERS',
  components: { BaseText },
  data() {
    return {
      filterId: 'restaurants-my-orders',
      credits: null,
      requestFields: [
        'uuid',
        'title',
        'admin',
        'content_type',
        'cost',
        'date',
        'order',
        { authors: ['uuid', 'firstname', 'lastname'] },
        { dishes_orders_status: ['uuid', 'title', 'color'] }
      ]
    }
  },
  computed: {
    headers() {
      return [
        { value: this.$_tr('headers.date'), sortable: true, key: 'date' },
        { value: this.$_tr('headers.menu') },
        { value: this.$_tr('headers.cost') },
        { value: this.$_tr('headers.status') }
      ]
    },
    filters() {
      return [
        {
          modelName: 'day',
          type: 'day',
          label: this.$_tr('filters.day'),
          filterOn: 'date',
          equality: '',
          class: 'day',
          callback: date => {
            if (!date) return

            return {
              'date:gte': `${date} 00:00:00`,
              'date:lte': `${date} 23:59:59`
            }
          }
        },
        {
          modelName: 'status',
          type: 'selectbox',
          fetch: true,
          reference: 'dishes_orders_status',
          fields: ['uuid', 'title'],
          filters: { status: 1 },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.status'),
          class: 'status'
        }
      ]
    },
    requestFilters() {
      return {
        sort: ['date:desc', 'published_at:desc'],
        'status:eq': 1,
        offset: 0,
        authors: {
          'uuid:eq': this.getUserInfos.uuid
        }
      }
    }
  },
  async beforeMount() {
    this.credits = await this.fetchCredits()
  },
  methods: {
    scaffoldRows(field) {
      const menu = JSON.parse(field.order)
        .map(({ name }) => name)
        .join(' - ')

      return [
        { id: 'date', class: 'date', value: this.$_formatDate(field.date) },
        { id: 'menu', class: 'menu', value: menu },
        {
          id: 'total',
          class: 'total',
          value: `${field.cost}€`
        },
        {
          id: 'status',
          class: 'status',
          value: field.dishes_orders_status.title,
          data: { style: { color: field.dishes_orders_status.color } }
        }
      ]
    },
    async fetchCredits() {
      try {
        const { data } = await http.get('content/users', {
          fields: ['credits'],
          filters: { 'uuid:eq': this.getUserInfos.uuid }
        })

        return data[0].credits
      } catch (err) {
        throw new Error(err)
      }
    },
    handleRowClick(row) {
      this.triggerModal(
        'restaurants-order',
        'fetch',
        { item: row, content: row.content_type },
        {
          layout: 'right',
          width: 550,
          transition: 'fadeInLeft',
          hideForm: true
        }
      )
    }
  }
}
</script>

<style lang="scss">
.restaurants-my-orders-container {
  .credits {
    width: 100%;
    text-align: center;

    span {
      font-weight: bold;
    }
  }
}
</style>
