import { createApp } from 'vue';
import AppRouter from './pages/AppRouter.js';  // AppRouter.js에서 default export한 router를 가져옵니다.
import App from './pages/App.vue';
import Store from "./pages/AppStore.js";
import VueCookies from 'vue-cookies';  // 쿠키 플러그인 추가

// Google API 스크립트 동적 로드 함수
function loadGapiScript() {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://apis.google.com/js/api.js';
    script.onload = resolve; // 로드 성공
    script.onerror = reject; // 로드 실패
    document.head.appendChild(script);
  });
}

// Google API 로드 후 Vue 앱 초기화
async function initVueApp() {
  try {
    // gapi 스크립트를 로드합니다.
    await loadGapiScript();

    // gapi가 정상적으로 로드되었는지 확인합니다.
    if (window.gapi) {
      window.gapi.load('client:auth2', initVue); // Vue 앱 초기화 함수 호출
    } else {
      console.error('gapi is not defined');
    }
  } catch (error) {
    console.error("Google API 로드 실패:", error);
  }
}

// Vue 앱 초기화 함수
function initVue() {
  const router = AppRouter;  // AppRouter를 바로 사용합니다.
  const vueApp = createApp(App);  // Vue 앱 인스턴스를 생성합니다.

  // Vue Router와 Store 사용
  vueApp
    .use(router)  // Vue Router 사용
    .use(Store)   // Vuex store 사용
    .use(VueCookies)  // VueCookies 사용
    .config.globalProperties.$gapi = window.gapi;  // gapi를 전역 속성으로 설정

  // 쿠키 설정
  vueApp.$cookies.config("1d"); // 쿠키 만료일 설정

  vueApp.mount("#root"); // Vue 앱을 #root에 마운트
}

// 앱 초기화 함수 실행
initVueApp();