<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { defineProps } from 'vue'
import { Colors } from '@/ThemeConfig.vue'
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const props = defineProps({
  menu_items: {
    type: Object,
    required: true
  },
  show_icons: {
    type: Boolean,
    default: true
  },
})

const route = useRoute()

const menu_items = ref([
  {
    name: 'Overblik',
    route: '/admin',
    icon: 'fas fa-tachometer-alt',
    children: []
  },
  {
    name: 'Vælg afdeling',
    options: [
      {
        label: 'Afdeling 1',
        value: 1,
        icon: 'fas fa-building',
        children: []
      },
      {
        label: 'Afdeling 2',
        value: 2,
        icon: 'fas fa-building',
        children: []
      },
      {
        label: 'Afdeling 3',
        value: 3,
        icon: 'fas fa-building',
        children: []
      }
    ],
    selected: null,
    onSelect: async (value) => {
      console.log(value);
    },
    isExpanded: false
  },
  {
    name: 'Administration',
    route: '/administration',
    icon: 'fas fa-cogs',
    children: [
      {
        name: 'Team Settings',
        route: '/team-settings',
        icon: 'fas fa-users-cog',
        children: []
      },
      {
        name: 'Manage Your Team',
        route: '/manage-your-team',
        icon: 'fas fa-users',
        children: [
          {
            name: 'Members',
            route: '/members',
            icon: 'fas fa-user',
            children: []
          },
          {
            name: 'Plugins',
            route: '/plugins',
            icon: 'fas fa-plug',
            children: []
          },
          {
            name: 'Add a member',
            route: '/add-a-member',
            icon: 'fas fa-user-plus',
            children: []
          }
        ]
      },
      {
        name: 'Invitations',
        route: '/invitations',
        icon: 'fas fa-envelope',
        children: []
      },
      {
        name: 'Cloud Storage Environment Settings',
        route: '/cloud-storage-environment-settings',
        icon: 'fas fa-cloud',
        children: []
      },
      {
        name: 'Authentication',
        route: '/authentication',
        icon: 'fas fa-key',
        children: []
      }
    ],
    hidden: 1 === null
  },
  {
    name: 'Transactions',
    route: '/transactions',
    icon: 'fas fa-exchange-alt',
    children: [
      {
        name: 'Payments',
        route: '/payments',
        icon: 'fas fa-money-bill-wave',
        children: []
      },
      {
        name: 'Transfers',
        route: '/transfers',
        icon: 'fas fa-exchange-alt',
        children: [],
        hidden: true
      },
      {
        name: 'Balance',
        route: '/balance',
        icon: 'fas fa-balance-scale',
        children: []
      }
    ]
  }
]);

const isItemVisible = (item = null) => {
  let result = true;
  // If the hidden property is not set, the item is visible
  try {
    if (item.hidden !== undefined) {
      // Check if the "Hidden" property is a function
      if (typeof item.hidden === 'function') {
        console.log('Hidden is a function');
        result = !item.hidden() ?? true;
      } else {
        result = !item.hidden ?? true;
      }
    }
  } catch (e) {}
  // Check if the user has the required permissions
  if (result && item.permissions !== undefined) {
    result = item.permissions.some(permission => SessionUser.hasPermission(permission));
  }
  // If the hidden property is set to true, the item is not visible
  return result;

}

// If the menu items are passed as props, use them instead
if (props.menu_items.length > 0) {
  menu_items.value = props.menu_items
}

// Check if the domain starts with jp-demo.truckwash.dk
//const isDemo = window.location.hostname.startsWith('jp-demo.truckwash.dk');
const isDemo = false;
</script>

<template>
  <aside
      class="menu is-screen-height"
      :style="{ 'background-color': Colors.menus.parentBackgroundColor, 'color': Colors.menus.parentTextColor }"
  >
    <!-- Image -->
    <div class="menu-image has-text-centered py-4 px-6 is-hidden-mobile">
      <img src="@/assets/branding/truckwash-banner-white-compressed.png" alt="Truck Wash Logo" v-if="!isDemo">
      <img src="@/assets/branding/truckcare-logo.png" alt="TruckCare logo" v-else>
    </div>
    <p class="menu-label"
        :style="{ 'color': Colors.menus.parentTextColor, 'background-color': Colors.menus.parentBackgroundColor }"
    >

    </p>
    <ul class="menu-list"
        :style="{ 'color': Colors.menus.textColor, 'background-color': Colors.menus.backgroundColor }"
    >
      <li v-for="item in menu_items" :key="item.name" :style="{'border-left':
      (item.selected)
      ? '0.8rem solid ' + Colors.menus.activeColor
      : '0.8rem solid transparent' }
      ">
        <a :class="{'is-active': route.path === item.route}" :href="item.route"
            :style="{ 'color': Colors.menus.textColor,
            'background-color': (item.selected)
            ? Colors.menus.activeBackgroundColor
            : Colors.menus.backgroundColor }
            "
           v-if="isItemVisible(item)"
           @click="(item.options) ? item.isExpanded = !item.isExpanded : null"
        >
          <!-- If the item has options, show the dropdown icon -->
          <span class="icon is-small is-pulled-left mr-2 is-vcentered"
                v-if="item.options"
                :class="{'is-active': item.isExpanded}"
                :style="{ 'rotate': item.isExpanded ? '180deg' : '0deg' }"
          ><i class="fas fa-angle-down"></i></span>
          <!-- If the item has an icon, show it -->
          <span class="icon is-small" v-if="props.show_icons"><i :class="item.icon"></i></span>
          <!-- If the item contains a selected value, show it -->
          <span v-if="item.selected && !item.isExpanded"><strong>{{ item.options.find(option => option.value === item.selected).label }}</strong></span>
          <span v-else><strong>{{ item.name }}</strong></span>
        </a>
        <ul v-if="item.options" class="menu-list" style="border-left: 0;">
          <!-- Dropdown -->
          <li v-for="option in item.options" :key="option.label" :style="{ 'color': Colors.menus.childTextColor,
              'background-color': (item.selected === option.value)
              ? Colors.menus.activeBackgroundColor
              : Colors.menus.backgroundColor }"
              v-if="item.isExpanded"
              v-show="isItemVisible(option)"
          >
            <a :class="{ 'is-active': item.selected === option.value }"
               class="menu-list-custom-hover-able-child-item"
                @click="item.onSelect(option.value)"
                :style="{ 'color': Colors.menus.childTextColor,
                'background-color': (item.selected === option.value)
                ? Colors.menus.activeBackgroundColor
                : Colors.menus.childBackgroundColor
                }"
               v-if="isItemVisible(option)"
            >
              <span class="icon is-small" v-if="props.show_icons"><i :class="option.icon"></i></span>
              <span v-if="item.selected === option.value"><strong>{{ option.label }}</strong></span>
              <span v-else>{{ option.label }}</span>
            </a>
          </li>
        </ul>
        <ul v-else class="menu-list">
          <!-- Children -->
          <li v-for="child in item.children" :key="child.name">
            <a :class="{'is-active': route.path === child.route}" :href="child.route"
                :style="{ 'color': Colors.menus.childTextColor, 'background-color': Colors.menus.childBackgroundColor }"
                v-if="isItemVisible(child)"
            >
              <span class="icon is-small" v-if="props.show_icons"><i :class="child.icon"></i></span>
              {{ child.name }}
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </aside>
</template>

<style scoped>
.menu-list-custom-hover-able-child-item:hover {
  background-color: #4a4a4a !important;
}
</style>