<!--
@license GNU AGPL version 3 or any later version

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
  <div id="side-menu">
    <div
      v-if="settings || !openerHover || (!avatar && !alwaysDisplayed && logo) || avatar"
      class="side-menu-header"
    >
      <SettingsButton
        v-if="settings"
        :href="settings.href"
        :label="settings.name"
        :avatar="settings.avatar"
      />
      <AppSearch v-model:search="search" />
      <OpenerButton v-if="!alwaysDisplayed" />
      <Logo
        v-if="!avatar && !alwaysDisplayed && logo"
        :classes="{ 'side-menu-logo': true, avatardiv: false }"
        :image="logo"
        :link="logoLink"
      />
      <Logo
        v-if="avatar"
        :classes="{ 'side-menu-logo': true, avatardiv: true }"
        :image="avatar"
        :link="logoLink"
      />
    </div>

    <ul
      class="side-menu-apps-list"
      :class="{ 'side-menu-apps-list--with-settings': !!settings }"
    >
      <template
        v-for="(app, key) in apps"
        :key="key"
      >
        <SideMenuApp
          v-if="isAppMatchingSearch(app.name, search)"
          :classes="{ 'side-menu-app': true, active: app.active }"
          :icon="app.icon"
          :label="app.name"
          :href="app.href"
          :target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
        />
      </template>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js'
import { useNavStore } from '../store/nav.js'
import { isAppMatchingSearch } from '../lib/search.js'

import OpenerButton from '../components/OpenerButton'
import SettingsButton from '../components/SettingsButton'
import SideMenuApp from '../components/SideMenuApp'
import AppSearch from '../components/AppSearch'
import Logo from '../components/Logo'

const navStore = useNavStore()
const configStore = useConfigStore()
const targetBlankApps = ref(null)
const forceLightIcon = ref(null)
const avatar = ref(null)
const logo = ref(null)
const logoLink = ref(null)
const settings = ref(null)
const openerHover = ref(null)
const alwaysDisplayed = ref(null)
const search = ref('')
const apps = ref([])

function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
  const data = []

  items.forEach((item) => {
    if (topMenuApps.includes(item.id) && !topSideMenuApps.includes(item.id)) {
      return
    }

    item.order = items.length + 1

    order.forEach((id, key) => {
      if (id === item.id) {
        item.order = key + 1
      }
    })

    data.push(item)
  })

  return data.sort((a, b) => {
    return a.order < b.order ? -1 : 1
  })
}

onMounted(async () => {
  const config = await configStore.getConfig()

  targetBlankApps.value = config['target-blank-apps']
  forceLightIcon.value = config['force-light-icon']
  avatar.value = config['avatar']
  logo.value = config['logo']
  logoLink.value = config['logo-link']
  settings.value = config['settings']
  openerHover.value = config['opener-hover']
  alwaysDisplayed.value = config['always-displayed']

  apps.value = getFiltredAndSortedApps(
    await navStore.getApps(),
    config['apps-order'],
    config['top-menu-apps'],
    config['top-side-menu-apps']
  )
})
</script>
