import pkg from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context'
import {DEFAULT_LOCALE, LOCALE_STORAGE_ACCESS_TOKEN_KEY, LOCALE_STORAGE_LOCALE_KEY} from "@/config/index.js";
import {computed} from "vue";

const { ApolloClient, ApolloLink, createHttpLink, InMemoryCache } = pkg;

const httpLink = createHttpLink({
  uri: 'https://api.' + import.meta.env.EVIBES_BASE_DOMAIN + '/graphql/',
});

const userLocale = computed(() => {
  return localStorage.getItem(LOCALE_STORAGE_LOCALE_KEY)
});

export const createApolloClient = () => {
  const accessToken = computed(() => {
    return localStorage.getItem(LOCALE_STORAGE_ACCESS_TOKEN_KEY)
  })

  const authLink = setContext((_, { headers }) => {
    const baseHeaders = {
      ...headers,
      "Accept-language": userLocale.value ? userLocale.value : DEFAULT_LOCALE,
    };

    if (accessToken.value) {
      baseHeaders["X-EVIBES-AUTH"] = `Bearer ${accessToken.value}`;
    }

    return { headers: baseHeaders };
  })

  return new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'cache-and-network',
      }
    }
  })
}