import { createApp } from 'vue';
import AppRouter from './pages/AppRouter.js';
import App from './pages/App.vue';
import Store from './pages/AppStore.js';
import VueCookies from 'vue-cookies';
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { provideApolloClient } from '@vue/apollo-composable'; // @vue/apollo-composable 사용
import Antd from 'ant-design-vue';


const httpLink = createHttpLink({
  uri: 'http://backend-example.codebootcamp.co.kr/graphql', // GraphQL 서버 주소
});

const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

// 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 vueApp = createApp(App); // Vue 앱 인스턴스를 생성합니다.

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

  // ApolloClient 제공
  provideApolloClient(apolloClient); // Apollo Client를 Vue에 제공

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


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

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