async function stallList(path) {
  const template = await loadTemplateAsync(path)
  Vue.component('stall-list', {
    name: 'stall-list',
    template,

    props: [`adminkey`, 'inkey', 'wallet-options'],
    data: function () {
      return {
        filter: '',
        stalls: [],
        pendingStalls: [],
        currencies: [],
        stallDialog: {
          show: false,
          showRestore: false,
          data: {
            name: '',
            description: '',
            wallet: null,
            currency: 'sat',
            shippingZones: []
          }
        },
        zoneOptions: [],
        stallsTable: {
          columns: [
            {
              name: '',
              align: 'left',
              label: '',
              field: ''
            },
            {
              name: 'id',
              align: 'left',
              label: 'Name',
              field: 'id'
            },
            {
              name: 'currency',
              align: 'left',
              label: 'Currency',
              field: 'currency'
            },
            {
              name: 'description',
              align: 'left',
              label: 'Description',
              field: 'description'
            },
            {
              name: 'shippingZones',
              align: 'left',
              label: 'Shipping Zones',
              field: 'shippingZones'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        }
      }
    },
    computed: {
      filteredZoneOptions: function () {
        return this.zoneOptions.filter(
          z => z.currency === this.stallDialog.data.currency
        )
      }
    },
    methods: {
      sendStallFormData: async function () {
        const stallData = {
          name: this.stallDialog.data.name,
          wallet: this.stallDialog.data.wallet,
          currency: this.stallDialog.data.currency,
          shipping_zones: this.stallDialog.data.shippingZones,
          config: {
            description: this.stallDialog.data.description
          }
        }
        if (this.stallDialog.data.id) {
          stallData.id = this.stallDialog.data.id
          await this.restoreStall(stallData)
        } else {
          await this.createStall(stallData)
        }

      },
      createStall: async function (stall) {
        try {
          const { data } = await LNbits.api.request(
            'POST',
            '/nostrmarket/api/v1/stall',
            this.adminkey,
            stall
          )
          this.stallDialog.show = false
          data.expanded = false
          this.stalls.unshift(data)
          this.$q.notify({
            type: 'positive',
            message: 'Stall created!'
          })
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
      },
      restoreStall: async function (stallData) {
        try {
          stallData.pending = false
          const { data } = await LNbits.api.request(
            'PUT',
            `/nostrmarket/api/v1/stall/${stallData.id}`,
            this.adminkey,
            stallData
          )
          this.stallDialog.show = false
          data.expanded = false
          this.stalls.unshift(data)
          this.$q.notify({
            type: 'positive',
            message: 'Stall restored!'
          })
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
      },
      deleteStall: async function (pendingStall) {
        LNbits.utils
          .confirmDialog(
            `
           Are you sure you want to delete this pending stall '${pendingStall.name}'?
          `
          )
          .onOk(async () => {
            try {
              await LNbits.api.request(
                'DELETE',
                '/nostrmarket/api/v1/stall/' + pendingStall.id,
                this.adminkey
              )
              this.$q.notify({
                type: 'positive',
                message: 'Pending Stall Deleted',
                timeout: 5000
              })
            } catch (error) {
              console.warn(error)
              LNbits.utils.notifyApiError(error)
            }
          })
      },
      getCurrencies: async function () {
        try {
          const { data } = await LNbits.api.request(
            'GET',
            '/nostrmarket/api/v1/currencies',
            this.inkey
          )

          return ['sat', ...data]
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
        return []
      },
      getStalls: async function (pending = false) {
        try {
          const { data } = await LNbits.api.request(
            'GET',
            `/nostrmarket/api/v1/stall?pending=${pending}`,
            this.inkey
          )
          return data.map(s => ({ ...s, expanded: false }))
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
        return []
      },
      getZones: async function () {
        try {
          const { data } = await LNbits.api.request(
            'GET',
            '/nostrmarket/api/v1/zone',
            this.inkey
          )
          return data.map(z => ({
            ...z,
            label: z.name
              ? `${z.name} (${z.countries.join(', ')})`
              : z.countries.join(', ')
          }))
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
        return []
      },
      handleStallDeleted: function (stallId) {
        this.stalls = _.reject(this.stalls, function (obj) {
          return obj.id === stallId
        })
      },
      handleStallUpdated: function (stall) {
        const index = this.stalls.findIndex(r => r.id === stall.id)
        if (index !== -1) {
          stall.expanded = true
          this.stalls.splice(index, 1, stall)
        }
      },
      openCreateStallDialog: async function (stallData) {
        this.currencies = await this.getCurrencies()
        this.zoneOptions = await this.getZones()
        if (!this.zoneOptions || !this.zoneOptions.length) {
          this.$q.notify({
            type: 'warning',
            message: 'Please create a Shipping Zone first!'
          })
          return
        }
        this.stallDialog.data = stallData || {
          name: '',
          description: '',
          wallet: null,
          currency: 'sat',
          shippingZones: []
        }
        this.stallDialog.show = true
      },
      openSelectPendingStallDialog: async function () {
        this.stallDialog.showRestore = true
        this.pendingStalls = await this.getStalls(true)
      },
      openRestoreStallDialog: async function (pendingStall) {
        const shippingZonesIds = this.zoneOptions.map(z => z.id)
        await this.openCreateStallDialog({
          id: pendingStall.id,
          name: pendingStall.name,
          description: pendingStall.config?.description,
          currency: pendingStall.currency,
          shippingZones: (pendingStall.shipping_zones || [])
            .filter(z => shippingZonesIds.indexOf(z.id) !== -1)
            .map(z => ({
              ...z,
              label: z.name
                ? `${z.name} (${z.countries.join(', ')})`
                : z.countries.join(', ')
            }))
        })
      },
      customerSelectedForOrder: function (customerPubkey) {
        this.$emit('customer-selected-for-order', customerPubkey)
      },
      shortLabel(value = ''){
        if (value.length <= 64) return value
        return value.substring(0, 60) + '...'
      }
    },
    created: async function () {
      this.stalls = await this.getStalls()
      this.currencies = await this.getCurrencies()
      this.zoneOptions = await this.getZones()
    }
  })
}