<template>
  <div id="google_translate_element" style="display: none;"></div>
  <div v-if="isAdminPage" v-cloak class="admin-wrap">
    <AdminHeader />
    <AdminMenu />
    <div class="main-warp">
      <PageNavigationBar :className="'admin-navigation pd10 pl30'" />
      <div class="router-wrap">
        <router-view />
      </div>
    </div>
  </div>
  <div v-else v-cloak class="user-wrap relative">
    <div id="skip">
      <a href="#mainContent" class="skip-navigation">본문내용 바로가기</a>
      <a href="#mainNav" class="skip-navigation">메인메뉴 바로가기</a>
    </div>
    <UserHeader :className="fixedHeader" v-if="
      (this.$route.path.startsWith('/aidt') || this.$route.path === '/cmmn/join.page')
      // && this.$store.state.authorization != null
    " />
    <!-- <UserHeader v-if="this.$route.path.startsWith('/company') || this.$route.path.startsWith('/government')" /> -->
    <main class="main-warp" id="mainContent">
      <router-view />
    </main>
    <Footer v-if="
      (this.$route.path.startsWith('/aidt') || this.$route.path === '/cmmn/join.page')
    " />
    <button class="top-scroll radius" aria-label="scroll move top button" id="scrollMoveTop" @click="scrollToTop"
      v-if="this.$route.path.startsWith('/aidt')"><svg-icon type="mdi" :path="path" role="img"
        aria-labelledby="scrollMoveTop"></svg-icon></button>
  </div>
  <LoadingSpinner></LoadingSpinner>
</template>

<script>
import UserHeader from "../layout/UserHeader.vue";
import AdminHeader from "../layout/AdminHeader.vue";
import AdminMenu from "../layout/AdminMenu.vue";
import Footer from "../layout/Footer.vue"
import LoadingSpinner from "../component/loading/LoadingSpinner.vue"
import PageNavigationBar from "../component/pagenavigationbar/PageNavigationBar.vue";
import { nextTick } from "vue";
import { mdiChevronUp } from '@mdi/js';
import COMMON_UTIL from "../../resources/js/commonUtil";
import { addLicense } from "@amcharts/amcharts5";





const App = {
  data: () => {
    return {
      fixedHeader: '',
      scrollPosition: 0,
      path: mdiChevronUp,
    };
  },
  created() {
    this.$initCmmnMessage();
  },
  methods: {
    handleScroll: function () {
      this.scrollPosition = window.scrollY;
      if (this.scrollPosition > 0) {
        this.fixedHeader = 'fixed'
      } else {
        this.fixedHeader = ''
      }
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 부드럽게 스크롤
      });
    },

    //웹접근성 관련 화살표 이벤트
    handleKeydown(event) {
      const { key } = event;
      const activeElement = document.activeElement;

      if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
        const cursorPos = activeElement.selectionStart;
        const valueLength = activeElement.value.length;

        if (key === 'ArrowLeft' && cursorPos > 0) return;
        if (key === 'ArrowRight' && cursorPos < valueLength) return;
        if (key === 'ArrowUp' || key === 'ArrowDown') return;
      }

      if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'ArrowRight' || key === 'ArrowLeft') {
        event.preventDefault();
        this.navigateWithArrowKeys(key);
      }
    },

    navigateWithArrowKeys(key) {
      const focusableElements = COMMON_UTIL.getFocusableElements();
      let currentIndex = focusableElements.indexOf(document.activeElement);

      if (key === 'ArrowDown' || key === 'ArrowRight') {
        currentIndex = (currentIndex + 1) % focusableElements.length;
      } else if (key === 'ArrowUp' || key === 'ArrowLeft') {
        currentIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
      }

      focusableElements[currentIndex].focus();
    },
  },
  watch: {},
  computed: {
    isAdminPage() {
      // 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단
      return this.$route && this.$route.path.startsWith("/kdm");
    },
  },
  components: {
    UserHeader: UserHeader,
    AdminHeader: AdminHeader,
    AdminMenu: AdminMenu,
    Footer: Footer,
    LoadingSpinner: LoadingSpinner,
    PageNavigationBar: PageNavigationBar
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    addLicense("AM5C11202011971121");
    document.addEventListener('keydown', this.handleKeydown);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
    document.removeEventListener('keydown', this.handleKeydown);
  },
};

export default App;
</script>

<style scoped>
[v-cloak] {
  display: none;
}
</style>
