<template>
  <v-runtime-template :template="template"></v-runtime-template>
</template>

<script>

import base from './c-base'

const props = {
  actions: {
    type: Array,
    required: true
  }
}

export default {
  extends: base,
  data: () => ({
    componentClass: 'c-action-toolbar'
  }),
  props,
  computed: {
    actionsWithoutGroup() {
      return this.actions.filter(action => !action.groupIdent)
    },
    groups() {
      let result = []

      this.actions.forEach(action => {
        if (!result.find(group => group.groupIdent === action.groupIdent))
          result.push({
            groupIdent: action.groupIdent,
            parentGroupIdent: action.parentGroupIdent
          })
      })

      return result
    },
    groupsIdentsWithoutParents() {
      let result = []

      this.actions.forEach(action => {
        if (action.groupIdent && !action.parentGroupIdent && !result.find(el => el === action.groupIdent)) {
          result.push(action.groupIdent)
        }
      })

      return result
    },
    template() {
      let actionsWithoutGroupTemplate = ''

      this.actionsWithoutGroup.forEach(action => {
        actionsWithoutGroupTemplate += `
            <li class="list-item list-item-action">
              <c-btna 
                :app-window-ident='appWindowIdent' 
                data-set-ident='${this.dataSetIdent}' 
                action-ident='${action.actionIdent}'
              ></c-btna>
            </li>
          `
      })

      return `
        <ul :class="[componentClass]">
          ${actionsWithoutGroupTemplate}
          ${this.renderTemplate(this.groupsIdentsWithoutParents)}
        </ul>
      `
    }
  },
  methods: {
    getActionsFor(groupIdent) {
      return this.actions.filter(action => action.groupIdent === groupIdent)
    },
    getChildrenGroupsIdentsOf(groupIdent) {
      return this.groups.filter(group => group.parentGroupIdent === groupIdent).map(group => group.groupIdent)
    },
    renderTemplate(groupsIdents) {
      let result = ''

      groupsIdents.forEach(groupIdent => {
        result += this.renderTemplateOne(groupIdent, 0)
      })

      return result
    },
    renderTemplateOne(groupIdent, level) {
      let result = ''

      const childrenGroupsIdents = this.getChildrenGroupsIdentsOf(groupIdent)

      result += `<li class="list-item list-item-group lvl-${level}">`
      result += `<div class="action-group lvl-${level}">${groupIdent}</div>`
      result += `<ul class="action-group-list lvl-${level}">`
      this.getActionsFor(groupIdent).forEach(action => {
        result += `
            <li class="list-item list-item-action lvl-${level+1}">
              <c-btna 
                :app-window-ident='appWindowIdent' 
                data-set-ident='${this.dataSetIdent}' 
                action-ident='${action.actionIdent}'
              ></c-btna>
            </li>
          `
      })
      if (childrenGroupsIdents.length > 0) {
        for (let i = 0; i < childrenGroupsIdents.length; i++) {
          result += this.renderTemplateOne(childrenGroupsIdents[i], level+1)
        }
      } 
      result += '</ul>'
      result += '</li>'

      return result
    }
  }
}

</script>