<template>
  <div class="account-menu-wrapper relative-position">
    <div class="absolute account-menu q-py-sm q-px-md row shadow-8">
      <div
        v-for="(column, columnIndex) in menuOptions"
        :key="columnIndex"
        class="q-pr-lg col-auto"
      >
        <div v-for="(section, sectionIndex) in column" :key="sectionIndex">
          <ul v-if="section.show" class="q-mb-sm">
            <li
              v-if="$rootScope.isHQ() ? section.isHQ : true"
              class="title q-py-sm"
            >
              {{ section.title.toUpperCase() }}
            </li>
            <li
              v-for="(item, index) in itemsToShow(section.items)"
              :key="index"
            >
              <a
                v-if="$rootScope.isHQ() ? item.isHQ : !item.hide"
                class="q-pa-sm"
                :href="item.to"
                :style="item.style"
                :target="item.target"
                :onClick="item.onClick"
              >
                {{ item.name }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const globalStore = window.PiniaStores.useGlobalStore();
const {
  loaded,
  $rootScope,
  customerInfo,
  notCustomer,
  showCartonDetailLookupDialog,
  showWishListDialog,
  showSalesSummaryReport,
} = window.Pinia.storeToRefs(globalStore);
const { hasGroupPermission } = globalStore;

const menuOptions = ref([]);

const highlightedOptionsStyle = {
  color: '#C73500',
  'font-weight': 'bold',
};

const dataParams = window.data_params;

const loadMenuOptions = () =>
  (menuOptions.value = [
    // Col 1
    [
      {
        title: 'SETUP',
        show: hasGroupPermission(['-Menu-ChangeAccount', '-Menu-Setup']),
        items: [
          { name: 'Preferences', to: '/ws/cs/preferences/' },
          {
            name: 'Rep Preferences',
            to: '/ws/cs/rep-preferences/#/hotpref',
            show: notCustomer.value,
          },
          {
            name: 'User Acct Maint.',
            to: '/ws/ad/useraccountmaint/',
          },
          {
            name: 'Customer Information',
            to: '/ws/brs/brsCustomerInfo/',
            show: notCustomer.value,
          },
        ],
      },
    ],

    // Col 2
    [
      {
        title: 'BRS',
        show: hasGroupPermission(['-Menu-BRS']),
        items: [],
      },
      {
        title: 'Lookups',
        show: hasGroupPermission(['-Menu-BRS']),
        items: [
          { name: 'Catalog Item', to: '/ws/reports/catalogitem/' },
          { name: 'Gun History', to: '/ws/reports/gunhistlookup/' },
          {
            name: 'Invoice Summary',
            to: '/ws/reports/invoicesummary/',
          },
          { name: 'Hotlist', to: '/ws/reports/hotlistreport/' },
        ],
      },
      {
        title: 'Tools',
        show: hasGroupPermission(['-Menu-BRS']),
        items: [
          { name: 'RMA Entry', to: '/ws/ar/rmaentry/' },
          {
            name: 'Contact Maintenance',
            to: '/ws/pu/contactmaintenance/',
          },
          {
            name: 'Show Maintenance',
            to: '/ws/brs/showmaint.php',
            show: notCustomer.value,
          },
          {
            name: 'Show Registration',
            to: '/shows/customerservice/',
            show: notCustomer.value,
          },
          {
            name: 'DEV Show Site',
            to: 'https://outdoorexpo-dev.bigrocksports.com/',
            show: $rootScope.value.isDev(),
            target: '_blank',
          },
        ],
      },
    ],

    // Col 3
    [
      {
        title: 'WEB MAINTENANCE',
        show: hasGroupPermission(['-Menu-WebMaint']),
        items: [
          {
            name: 'Link Maintenance',
            to:
              '/ws/mn/webspeed.php?p_url=' +
              encodeURIComponent(
                '/cgi-bin/' +
                  window.globalEnvVars.$brokerId +
                  '.sh/ws/ad/ad07000.w' +
                  '&p-ctrl=' +
                  dataParams.p_ctrl +
                  '&p_ctrl=' +
                  dataParams.p_ctrl +
                  '&p-comp=BRS&p-userid=' +
                  dataParams.user_id +
                  '&p-user=' +
                  dataParams.user_id +
                  '&loginid=' +
                  dataParams.user_id +
                  '&p-valid-locs=' +
                  dataParams.p_valid_locs +
                  '&p-usertype=' +
                  dataParams.user_type +
                  '&pusertype=' +
                  dataParams.user_type +
                  '&p-customer=' +
                  dataParams.cust_num +
                  '&p-custnum=' +
                  dataParams.cust_num +
                  '&pcode=c&p-domain-pref=',
              ),
          },
          {
            name: 'Tooltips Maintenance',
            to: '/ws/tools/tooltipsmaint.php',
          },
          { name: 'Link Creator', to: '/ws/tools/linkcreator/' },
        ],
      },
    ],

    // Col 4
    [
      {
        title: 'BRS REPORTS',
        show: hasGroupPermission(['-Menu-BRSReports']),
        items: [],
      },
      {
        title: 'Dealer Reports',
        show: hasGroupPermission(['-Menu-BRSReports']),
        items: [
          {
            name: 'Customer History',
            to: '/ws/reports/custhistorysearch/',
          },
          {
            name: 'Customer Ranking',
            to: '/ws/reports/custrankreport/',
          },
        ],
      },
      {
        title: 'Order Reports',
        show: hasGroupPermission(['-Menu-BRSReports']),
        items: [
          {
            name: 'Open Orders by Cust or Item',
            to: '/ws/reports/openorders/',
          },
          {
            name: 'Committed Orders',
            to: '/ws/reports/committedorders/',
          },
          {
            name: 'Order On Verify',
            to: '/ws/reports/ordersonverify/',
          },
          {
            name: 'Receiving Report',
            to: '/ws/reports/itemsreceived/',
          },
        ],
      },
      {
        title: 'Invoice Reports',
        show: hasGroupPermission(['-Menu-BRSReports']),
        items: [
          {
            name: 'Invoice Summary',
            to: '/ws/reports/invoicesummary/',
          },
          {
            name: 'Invoice History',
            to: '/ws/reports/invoicehistory/',
          },
          {
            name: 'Detailed Spiff Report',
            to: '/ws/reports/detailspiff/',
          },
          {
            name: 'Summary Spiff Report',
            to: '/ws/reports/summaryspiff/',
          },
        ],
      },
      {
        title: 'Rep Reports',
        show: hasGroupPermission(['-Menu-BRSReports']),
        items: [
          {
            name: 'Commissions Report',
            to: '/ws/reports/commissionsReport/',
          },
          {
            name: 'Committed Items',
            to: '/ws/reports/committedItems/',
          },
          {
            name: 'Sales Summary',
            to: 'javascript:void(0)',
            show: !globalStore.isProd,
            onClick: () => (showSalesSummaryReport.value = true),
          },
        ],
      },
    ],

    // Col 5
    [
      {
        title: 'RETAIL TOOLS',
        show: hasGroupPermission(['-Menu-RetailTools']),
        items: [
          {
            name: 'Retail Setup',
            to: '/ws/retailtools/retailsetup/',
          },
          { name: 'POS Dump', to: '/ws/retailtools/posdump/' },
          {
            name: 'POS Report',
            to: '/ws/retailtools/posreport/',
            show:
              customerInfo.value.user_type === 'S' ||
              customerInfo.value.user_type === 'I' ||
              customerInfo.value.user_type === 'E',
          },
          {
            name: 'Online Catalogs',
            to: '/ws/tools/pdfviewer.php',
            show: customerInfo.value.site_code === 'BRS',
          },
        ],
      },

      {
        title: 'Reports',
        show: hasGroupPermission(['-Menu-RetailTools']),
        items: [
          {
            name: 'Customer Purchases By Item',
            to: '/ws/reports/custpurchbyitem/',
          },
          {
            name: 'Customer Purchases By Month',
            to: '/ws/reports/custpurchbymonth/',
          },
          {
            name: 'Customer Purchases By Vendor',
            to: '/ws/reports/custpurchbyvendor/',
          },
          { name: 'Usage Report', to: '/ws/reports/usagereport/' },
          {
            name: 'Backorder Report',
            to: '/ws/reports/backorderreport/',
          },
          {
            name: 'BRS Allocated Firearms Report',
            to: '/ws/reports/allocateditemsreport/',
          },
          {
            name: 'BRS Exclusive Items Report',
            to: '/ws/reports/exclusiveitemsreport/',
          },
          {
            name: 'Deleted Items Report',
            to: '/ws/reports/delitems/',
          },
          { name: 'New Items Report', to: '/ws/reports/newitems/' },
          {
            name: 'Single Location Items Report',
            to: '/ws/reports/singleloc/',
          },
          {
            name: 'Special Color Lure Report',
            to: '/ws/rp/lurereport.php',
          },
          {
            name: 'Closeout Report',
            to: '/ws/reports/closeoutreport/',
          },
          {
            name: 'Check Fax Form',
            to: '/files/reports/checkfax.doc',
          },
          {
            name: 'BRS Order Form',
            to: '/files/cabinet/brs_order_forms_may_2014.pdf',
          },
          { name: 'BRS Policies', to: '/pages/slspolicy.pdf?vers=1' },
          {
            name: 'Private Label Images',
            to: '/ws/reports/privatelabel/',
          },
          {
            name: 'Calcutta Name Drop Order Form',
            to: '/files/reports/CalcuttaNameDropOrderForm.xls',
          },
        ],
      },
    ],

    // Col 6
    [
      {
        title: 'ORDERING',
        show: true,
        items: [
          {
            name: 'Order Entry',
            to: '/ws/oe/orderentry/',
            hide: !hasGroupPermission(['-UpdateCart']),
          },
          {
            name: 'Quick Order Entry',
            to: '/ws/oe/quickorderentry/',
            hide: !hasGroupPermission(['-UpdateCart']),
          },
          {
            name: 'Upload Order File',
            to: '/ws/ordering/ordUpload/',
            hide: !hasGroupPermission(['-UpdateCart']),
          },
          {
            name: 'Hotlist Items',
            to: '/ws/ordering/hotlist/',
            hide: !hasGroupPermission(['-UpdateCart']),
            style: highlightedOptionsStyle,
          },
          {
            name: 'Wish Lists',
            hide: !hasGroupPermission(['-UpdateCart']),
            to: 'javascript:void(0)',
            onClick: () => (showWishListDialog.value = true),
          },
          {
            name: 'Dealer Re-Order Report',
            to: '/ws/reports/dealerreorder/',
            hide: !hasGroupPermission(['-UpdateCart']),
          },
          {
            name: 'Orders',
            to: '/ws/ordering/orders/',
            style: highlightedOptionsStyle,
          },
          { name: 'Backorder Cancel', to: '/ws/oe/backordercancel/' },
        ],
      },
      {
        title: 'INVOICING',
        show: hasGroupPermission(['-Menu-Invoicing']),
        items: [
          {
            name: 'Invoices/Credits',
            to: $rootScope.value.invoicesAndCreditsLink,
            style: highlightedOptionsStyle,
          },
          {
            name: 'Carton Detail Lookup',
            to: 'javascript:void(0)',
            onClick: () => (showCartonDetailLookupDialog.value = true),
          },
          {
            name: 'Pay Invoice',
            to: '/ws/invoicing/invoicepayment/',
            style: highlightedOptionsStyle,
            show: $rootScope.value.allowPay(),
          },
          {
            name: 'Setup Payments',
            to: '/ws/payments/',
            show: $rootScope.value.showSetupPayment(),
          },
          { name: 'RMA Review', to: '/ws/invoicing/rmareview/' },
          { name: 'A/R Activity Report', to: '/ws/rp/aractivity/' },
        ],
      },
      {
        title: '',
        show: true,
        items: [
          {
            name: 'CUST SELECT',
            to: '/ws/mn/customerselect/',
            show: hasGroupPermission([
              '-Account-BRSSalesRep',
              '-Account-BRSCustomerService',
              '-Menu-ChangeAccount',
              '-Menu-WebDev',
            ]),
          },
          {
            name: 'CUST LOG',
            to: '/ws/brs/contactlog/',
            show: hasGroupPermission([
              '-Account-BRSSalesRep',
              '-Account-BRSCustomerService',
              '-Menu-WebDev',
            ]),
          },
          {
            name: 'USER ACCT MAINT',
            to: '/ws/ad/useraccountmaint/',
          },
          { name: 'PRODUCT SEARCH', to: '/ws/ps/', isHQ: true },
          { name: 'LOG OUT', to: $rootScope.value.logoutDest, isHQ: true },
          {
            name: 'NERVE CENTER',
            to: '/ws/wms/',
          },
          {
            name: 'B2B - WEB HELP',
            to: 'https://help.bigrocksports.com',
            target: '_blank',
          },
        ],
      },
    ],
  ]);

const itemsToShow = (items) => {
  return items.filter((i) => i.show !== false);
};

watch(loaded, loadMenuOptions);
if (loaded.value) loadMenuOptions();
</script>

<style scoped>
.account-menu {
  top: 0;
  right: 0;
}
.account-menu a:link,
a:visited {
  font-family:
    Roboto,
    -apple-system,
    'Helvetica Neue',
    sans-serif;
  font-size: 1.5rem;
  line-height: 2.8rem;
  font-weight: normal;
}
.account-menu-wrapper {
  z-index: 100;
}
.account-menu-wrapper .account-menu {
  background-color: #eee;
  overflow: auto;
  max-height: 100vh;
}
.account-menu-wrapper ul {
  list-style: none;
  padding-inline-start: 0;
}
.account-menu-wrapper ul li {
  list-style: none;
}
.account-menu-wrapper ul a,
.account-menu-wrapper ul a:visited {
  text-decoration: none;
  color: black;
}
.account-menu-wrapper ul a:hover {
  color: black !important;
  background-color: #ee8900;
  border-radius: 4px;
}
.account-menu-wrapper ul li.title {
  font-weight: bold;
  font-size: 1.5rem;
}
</style>
