<template>
  <div class="row justify-between q-pb-xs">
    <div class="col-auto q-ml-sm q-mt-sm">
      <template v-if="$rootScope?.isHQ()">
        <a href="/" class="logo">
          <img
            class="img-responsive"
            src="/styles/logos/hq_logo_new.png"
            alt="HQ logo"
          />
        </a>
      </template>
      <template v-else>
        <a
          href="/"
          class="logo"
          v-if="
            customerInfo?.p_valid_locs?.substr(0, 2) != 'MA' &&
            customerInfo?.masterCust != 'CANTIRE' &&
            !customerInfo?.p_valid_locs?.match('RD')
          "
        >
          <img
            class="img-responsive"
            src="/styles/logos/brs_logo_test.png"
            alt="BRS logo"
          />
        </a>
        <a
          href="/"
          class="logo"
          v-if="
            customerInfo?.p_valid_locs?.substr(0, 2) == 'MA' &&
            customerInfo?.masterCust != 'CANTIRE' &&
            !customerInfo?.p_valid_locs?.match('RD')
          "
        >
          <img
            class="img-responsive"
            style="max-height: 100px"
            src="/styles/logos/brs_logo_ktl.png"
            alt="BRS logo"
          />
        </a>
        <a
          href="/"
          class="logo"
          v-if="
            customerInfo?.masterCust == 'CANTIRE' &&
            !customerInfo?.p_valid_locs?.match('RD')
          "
        >
          <img
            class="img-responsive"
            style="max-height: 100px"
            src="/styles/logos/BRS-CTC.jpg"
            alt="BRS logo"
          />
        </a>
        <a
          href="/"
          class="logo"
          v-if="customerInfo.p_valid_locs?.match('RD')?.length > 0"
        >
          <img
            class="img-responsive"
            style="max-height: 100px"
            src="/daiwa3pl/daiwa.png"
            alt="Daiwa logo"
          />
        </a>
      </template>
    </div>
    <div class="col">
      <div class="row justify-end">
        <!-- special links -->
        <div class="col-lg-auto col-md-4 row justify-start sub-menu hide-1000">
          <div v-if="$rootScope.notHQ()">
            <a
              href="javascript:void(0)"
              @click="$rootScope.clickInStockGunsOrAmmo()"
              class="highlighted-link"
            >
              Ammunition - IN STOCK
            </a>
          </div>
          <div v-if="$rootScope.notHQ()">
            <a
              href="javascript:void(0)"
              @click="$rootScope.clickInStockGunsOrAmmo(1)"
              class="highlighted-link"
            >
              Firearms - IN STOCK
            </a>
          </div>
        </div>
        <!-- quick links -->
        <div class="col row justify-end sub-menu hide-1000">
          <div v-if="$rootScope.notHQ()"><a href="/">Home</a></div>
          <div v-if="$rootScope.notHQ()">
            <a
              href="javascript:void(0)"
              class="highlighted-link"
              @click="triggerPromotions"
            >
              Promotions
            </a>
          </div>
          <div v-if="$rootScope.notHQ()">
            <a
              :href="'/ws/ps/?N=5070+5040' + $rootScope.closeoutFilter"
              class="highlighted-link"
              @click.prevent="
                $rootScope.globalCtrl.menuItemClicked(
                  'Closeout',
                  'SO',
                  '/ws/ps/?N=5070+5040' + $rootScope.closeoutFilter,
                )
              "
            >
              Closeout
            </a>
          </div>
          <div v-if="$rootScope.allowPay()">
            <a href="/ws/invoicing/invoicepayment">Pay Invoice</a>
          </div>
          <div v-if="$rootScope.isUS()">
            <a href="/ws/ordering/orders/">Orders</a>
          </div>
          <div v-if="$rootScope.notHQ()">
            <a
              v-if="$rootScope.isUS()"
              href="/ws/mn/infopage.php?page=6#/page=industryresources"
            >
              Resources
            </a>
            <a
              v-if="$rootScope.isCA()"
              href="/ws/mn/infopage.php?page=6#/page=industryresourcesca"
            >
              Resources
            </a>
          </div>
          <div v-if="$rootScope.notHQ()">
            <a href="https://outdoorexpo.bigrocksports.com/" target="_blank">
              Shows
            </a>
          </div>
          <div>
            <a
              v-if="$rootScope.isUS()"
              href="https://www.bigrocksports.com/contact-us/"
              target="_blank"
            >
              Contact Us
            </a>
            <a
              v-else-if="$rootScope.isCA()"
              href="https://www.bigrocksports.ca/contact-us/"
              target="_blank"
            >
              Contact Us
            </a>
            <a
              v-else-if="$rootScope.isHQ()"
              href="https://hqtaxidermy.com/contact.html"
              target="_blank"
            >
              Contact Us
            </a>
          </div>
          <div v-if="!$rootScope?.isHQ()">
            <a
              v-if="$rootScope.notHQ()"
              href="javascript:void(0)"
              @click="$rootScope.displaySalesRepInfoModal"
            >
              Contact Rep
            </a>
          </div>
          <div v-if="!$rootScope?.isHQ()">
            <a href="javascript:void(0)">
              ...
              <q-menu
                class="sub-menu q-pa-xs bg-grey-3"
                style="min-width: 250px"
              >
                <div>
                  <a v-if="$rootScope.notHQ()" href="/v1/offline/">
                    Offline Product Search
                  </a>
                </div>
              </q-menu>
            </a>
          </div>
        </div>

        <!-- mobile link menu -->
        <div class="row show-1000 justify-end">
          <q-btn
            icon="menu"
            label="Links"
            class="q-ma-sm"
            color="grey-2"
            text-color="dark"
            style="height: 40px"
          >
            <q-menu class="sub-menu q-pa-xs bg-grey-3" style="min-width: 250px">
              <div v-if="$rootScope.notHQ()">
                <a
                  href="javascript:void(0)"
                  @click="$rootScope.clickInStockGunsOrAmmo"
                  class="text-dark"
                >
                  Ammunition - IN STOCK
                </a>
              </div>
              <div v-if="$rootScope.notHQ()">
                <a
                  href="javascript:void(0)"
                  @click="$rootScope.clickInStockGunsOrAmmo"
                  class="text-dark"
                >
                  Firearms - IN STOCK
                </a>
              </div>
              <div v-if="$rootScope.notHQ()"><a href="/">Home</a></div>
              <div v-if="$rootScope.notHQ()">
                <a href="javascript:void(0)" @click="triggerPromotions">
                  Promotions
                </a>
              </div>
              <div v-if="$rootScope.notHQ()">
                <a
                  :href="'/ws/ps/?N=5070+5040' + $rootScope.closeoutFilter"
                  class="highlighted-link"
                  @click.prevent="
                    $rootScope.globalCtrl.menuItemClicked(
                      'Closeout',
                      'SO',
                      '/ws/ps/?N=5070+5040' + $rootScope.closeoutFilter,
                    )
                  "
                >
                  Closeout
                </a>
              </div>
              <div v-if="$rootScope.allowPay()">
                <a href="/ws/invoicing/invoicepayment">Pay Invoice</a>
              </div>
              <div v-if="$rootScope.isUS()">
                <a href="/ws/ordering/orders/">Orders</a>
              </div>
              <div v-if="$rootScope.notHQ()">
                <a
                  v-if="$rootScope.isUS()"
                  href="/ws/mn/infopage.php?page=6#/page=industryresources"
                >
                  Resources
                </a>
                <a
                  v-if="$rootScope.isCA()"
                  href="/ws/mn/infopage.php?page=6#/page=industryresourcesca"
                >
                  Resources
                </a>
              </div>
              <div v-if="$rootScope.notHQ()">
                <a href="https://outdoorexpo.bigrocksports.com/">Shows</a>
              </div>
              <div>
                <a
                  v-if="!$rootScope.isCA()"
                  href="https://www.bigrocksports.com/contact-us/"
                >
                  Contact Us
                </a>
                <a
                  v-if="$rootScope.isCA()"
                  href="https://www.bigrocksports.ca/contact-us/"
                >
                  Contact Us
                </a>
              </div>
              <div>
                <a
                  v-if="$rootScope.notHQ()"
                  href="javascript:void(0)"
                  @click="$rootScope.displaySalesRepInfoModal"
                >
                  Contact Rep
                </a>
              </div>
              <div>
                <a v-if="$rootScope.notHQ()" href="/v1/offline/">
                  Offline Product Search
                </a>
              </div>
            </q-menu>
          </q-btn>

          <div>
            <cart-menu class="col justify-end q-pr-sm q-py-xs" />
          </div>
        </div>
      </div>
      <cart-menu class="hide-1000 justify-end q-py-xs q-pr-sm" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, computed } from 'vue';
import CartMenu from './CartMenu.vue';

const globalStore = window.PiniaStores.useGlobalStore();
const { isNerveCenter } = globalStore;
const {
  $rootScope,
  customerInfo,
  showMegaMenu,
  showNewTheme,
  showNewProductSearch,
  showPromotions,
  isDeveloper,
} = window.Pinia.storeToRefs(globalStore);

$rootScope.value.showOldTheme = () => {
  return !showNewTheme.value && !isNerveCenter();
};

const triggerPromotions = () => {
  showMegaMenu.value = true;
  showPromotions.value = true;
};

const isProductSearch = computed(() =>
  window.location.pathname.includes('/ws/ps'),
);

watch(showNewTheme, () => {
  $rootScope.value.refreshCartTotals();
});

watch(showNewProductSearch, () => {
  window.Quasar.Loading.show();
  try {
    window.Quasar.SessionStorage.set(
      'showNewProductSearch',
      showNewProductSearch.value,
    );
  } catch (e) {
    // data wasn't successfully saved due to
    // a Web Storage API error
    console.error(e);
  }
  location.reload();
});
</script>

<style scoped>
.highlighted-link {
  text-decoration: underline 2px #ee8900;
}
div.sub-menu a,
div.sub-menu a:link,
div.sub-menu a:visited {
  padding: 0.2em 0.5em;
}
div.sub-menu a:hover {
  color: black !important;
  background-color: #ee8900;
  border-radius: 4px;
}
div.sub-menu > div {
  margin: 5px 10px;
}
div.sub-menu > div > a:link,
a:visited {
  font-size: 1.2em;
  font-weight: bold;
  color: #595959;
  font-family:
    Roboto,
    -apple-system,
    'Helvetica Neue',
    sans-serif !important;
}

@media screen and (min-width: 500px) {
  .logo img {
    max-height: 70px;
    float: left;
  }
}

@media screen and (max-width: 501px) {
  .logo img {
    max-height: 40px;
    float: left;
  }
}

@media screen and (max-width: 1000px) {
  .hide-1000 {
    display: none !important;
  }
}
@media screen and (min-width: 1001px) {
  .show-1000 {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  .hide-600 {
    display: none !important;
  }
}
@media screen and (min-width: 601px) {
  .show-600 {
    display: none !important;
  }
}
</style>
