import { onMounted, ref, useContext, Ref } from '@nuxtjs/composition-api'
import * as _ from 'lodash'

/**
 * @category composables/form
 * @class UseNavigationHelpers
 * Use Classe pour gérer les expansions des accordions
 */
export class UseNavigationHelpers {
  public static expansionPanels () {
    const { route } = useContext()
    const panel: Ref<number> = ref(0)
    const activeAccordionId = route.value.query.accordion
    onMounted(() => {
      setTimeout(function () {
        _.each(document.getElementsByClassName('v-expansion-panel'), (element, index) => {
          if (element.id == activeAccordionId) {
            panel.value = index
          }
        })
        if (!panel.value) { panel.value = 0 }
      }, 0)
    })

    return {
      panel
    }
  }
}