<template>
  <header class="flex_mid">
    <q-resize-observer @resize="onResize" />
    <div class="header_toolbar">
      <div class="header_logo_area flex_mid">
        <a href="/">
          <img src="logo.webp" alt="logo" class="logo" />
          <!-- <span>BgSub</span> -->
        </a>
      </div>
      <div class="flex_mid">
        <HeaderNav :navItems="navItems" :modelValue="navItemName"></HeaderNav>
      </div>
      <div class="nav_right_area">
        <a :href="link_com">
          <div
            v-show="showLangSwitch == 'en-us'"
            class="feedbackBtn flex_mid bg-green-6"
          >
            English Page
          </div>
        </a>
        <a :href="link_cn">
          <div
            v-show="showLangSwitch == 'zh-cn'"
            class="feedbackBtn flex_mid bg-green-6"
          >
            中文页面
          </div>
        </a>
      </div>
    </div>
    <q-dialog v-model="feedbackDialog">
      <q-card>
        <q-card-section class="row items-center">
          <span class="text-h6">{{
            $t('Thank you very much for your feedback!')
          }}</span>
          <span class="text-body1">{{
            $t(
              'If it is a problem that needs to be solved, please include the following information to help us locate and resolve the problem.'
            )
          }}</span>
          <span class="text-body1 feedbackInfo">{{ getFeedbackInfo() }}</span>
        </q-card-section>

        <q-card-actions align="right">
          <a
            target="_blank"
            :href="feedbackLink"
            @click="feedbackDialog = false"
          >
            <div class="feedbackBtn flex_mid">
              {{ $t('Continue feedback') }}
            </div>
          </a>
          <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </header>
</template>
<style lang="scss" scoped>
.feedbackInfo {
  max-width: 100%;
  border: 2px solid $primary;
  border-radius: 4px;
  padding: 10px;
  font-weight: 500;
  color: $color-text;
}
.nav_right_area {
  display: flex;
}
a:visited {
  color: white;
}
a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.feedbackBtn {
  color: white;
  background: $primary;
  margin: 0px 10px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  padding: 10px 18px;
  border-radius: 4px;
}
.header_logo_area {
  display: flex;
  color: $primary;
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 0;
  img {
    max-height: 100%;
    height: 42px;
  }
}
@media only screen and (max-width: 600px) {
  .header_logo_area {
    img {
      max-height: 100%;
      height: 32px;
    }
  }
  .feedbackBtn {
    font-size: 12px;
    line-height: 18px;
    padding: 8px 12px;
  }
}
.header_toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
</style>

<script lang="ts">
import { defineComponent } from 'vue';
import HeaderNav from './HeaderNav.vue';
import { initBaidu, initGoogle } from './analytics';
export default defineComponent({
  name: 'BgSubHeader',
  components: {
    HeaderNav,
  },
  watch: {
    $route() {
      this.navItemName = this.$route.name as string;
    },
  },
  data() {
    return {
      link_cn: '',
      link_com: '',
      navItemName: 'home',
      feedbackDialog: false,
      navItems: [
        {
          value: 'Home',
          name: 'home',
          link: '/',
        },
        {
          value: 'Web App',
          name: 'webapp',
          link: '/webapp',
        },
        {
          value: 'About Us',
          name: 'about',
          link: '/pages/#/about',
        },
      ],
      logoUrl: require('../assets/BgSub_long.svg'),
      accountName: null as null | string,
      feedbackLink: 'mailto:support@bgsub.com',
      showLangSwitch: '',
    };
  },
  methods: {
    onResize(size: { width: number; height: number }) {
      document.documentElement.style.setProperty(
        '--headerH',
        size.height + 'px'
      );
      document.documentElement.style.setProperty(
        '--headerW',
        size.width + 'px'
      );
    },
    getFeedbackInfo() {
      const devInfo = this.$q.platform.is;
      let infoText = '';
      for (const infoName in devInfo) {
        infoText +=
          infoName +
          ':' +
          (devInfo as unknown as { [key: string]: string })[infoName] +
          ', ';
      }
      const BgSubVersion = sessionStorage.getItem('BgSubVersion');
      if (BgSubVersion) {
        infoText += 'BgSubVersion:' + BgSubVersion + ',';
      }
      const BgSubAccelerate = sessionStorage.getItem('BgSubAccelerate');
      if (BgSubAccelerate) {
        infoText += 'BgSubAccelerate:' + BgSubAccelerate + ',';
      }
      return infoText;
    },
  },
  mounted() {
    const naviLang = navigator.language.toLocaleLowerCase();
    const localeLang = this.$i18n.locale.toLocaleLowerCase();
    if (localeLang == 'zh-cn') {
      this.feedbackLink = 'https://support.qq.com/products/421246';
    }
    if (naviLang == 'zh-cn' && localeLang != 'zh-cn') {
      this.showLangSwitch = 'zh-cn';
    } else if (naviLang != 'zh-cn' && localeLang == 'zh-cn') {
      this.showLangSwitch = 'en-us';
    }
    if (window.location.host.indexOf('bgsub.cn') >= 0) {
      if (window.location.href.indexOf('webapp') <= 0) {
        initBaidu();
      }
      initGoogle('G-Z5C3X0DF7F');
    } else if (window.location.host.indexOf('bgsub.com') >= 0) {
      initGoogle('G-PVECWJGPPW');
    }
    this.link_cn = location.href.replace(location.host, 'bgsub.cn');
    this.link_com = location.href.replace(location.host, 'bgsub.com');
    this.navItemName = this.$route.name as string;
  },
});
</script>
