<script>
import { markRaw } from 'vue'

import DefaultModal from '@inside-library/components/modals/default/DefaultModal'
import CreditsModalForm from './../sub-components/CreditsModalForm'

export default {
  name: 'restaurants-credits-modal',
  $_i18nRootPath: 'customs.RESTAURANTS.MODALS.CREDITS',
  components: {
    CreditsModalForm
  },
  extends: DefaultModal,
  data() {
    return {
      selection: {
        uuid: 'uuid',
        firstname: 'firstname',
        lastname: 'lastname',
        credits: 'credits',
        orders: 'orders'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        title: this.$_username(fields),
        subtitle: this.$_tc(
          'subtitle',
          [fields.credits || '0'],
          this.$_currentLang,
          fields.credits || 0
        ),
        sections: [
          ...this.insertIf(fields.orders.length, {
            name: this.$_tc(
              'lastOrders',
              [fields.orders.length || 0],
              this.$_currentLang,
              fields.orders.length || 0
            ),
            fields: [
              {
                tag: 'table-listing',
                data: {
                  id: 'restaurants-credit-modals-commands',
                  staticData: fields.orders,
                  headers: [{ value: 'date' }, { value: 'cost' }],
                  rows: fields => [
                    {
                      tag: 'date-ui',
                      data: { date: fields.date }
                    },
                    {
                      value: `${fields.cost}€`
                    }
                  ]
                }
              }
            ]
          }),
          {
            fields: [
              {
                tag: markRaw(CreditsModalForm),
                data: { userUuid: fields.uuid, credits: fields.credits }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>
