window.app.component('lnbits-manage-extension-list', {
  template: '#lnbits-manage-extension-list',
  data() {
    return {
      extensions: [],
      userExtensions: [],
      searchTerm: ''
    }
  },
  watch: {
    'g.user.extensions'() {
      this.loadExtensions()
    },
    searchTerm() {
      this.filterUserExtensionsByTerm()
    }
  },
  methods: {
    async loadExtensions() {
      try {
        res = await LNbits.api.request('GET', '/api/v1/extension')
        this.extensions = res.data.sort((a, b) => a.name.localeCompare(b.name))
        this.filterUserExtensionsByTerm()
      } catch (error) {
        LNbits.utils.notifyApiError(error)
      }
    },
    filterUserExtensionsByTerm() {
      const userExts = this.g.user.extensions
      this.userExtensions = this.extensions
        .filter(o => userExts.includes(o.code))
        .filter(o => {
          if (this.searchTerm === '') return true
          return `${o.code} ${o.name} ${o.short_description} ${o.url}`
            .toLocaleLowerCase()
            .includes(this.searchTerm.toLocaleLowerCase())
        })
    },
    extensionUrl(extension) {
      if (extension.is_wasm) {
        return `/ext/${extension.code}`
      }
      return `/${extension.code}/`
    },
    extensionActive(extension) {
      const extensionPath = extension.is_wasm
        ? `/ext/${extension.code}`
        : `/${extension.code}`
      return this.$route.path.startsWith(extensionPath)
    }
  },
  async created() {
    await this.loadExtensions()
  }
})