import { z } from 'zod';
import { createClient, fetchExchange, subscriptionExchange } from '@urql/core';
import { createClient as createWsClient } from 'graphql-ws';

// Get API URLs from environment variables
const envSchema = z
  .object({ VITE_API_URL: z.string(), VITE_WS_URL: z.string() })
  .transform((env) => ({
    API_URL: env.VITE_API_URL,
    WS_URL: env.VITE_WS_URL,
  }));
const { API_URL, WS_URL } = envSchema.parse(import.meta.env);
console.log('Current API_URL', API_URL);
console.log('Current WS_URL', WS_URL);

// Create a WebSocket client for GraphQL subscriptions
const wsClient = createWsClient({
  url: WS_URL,
});

// Create the URQL client
export const client = createClient({
  url: API_URL,
  exchanges: [
    fetchExchange,
    subscriptionExchange({
      forwardSubscription: (operation) => ({
        subscribe: (sink) => {
          const dispose = wsClient.subscribe(
            { ...operation, query: operation.query || '' },
            sink
          );
          return {
            unsubscribe: dispose,
          };
        },
      }),
    }),
  ],
  // For development, we'll add a simple header-based authentication
  fetchOptions: () => {
    const token = localStorage.getItem('token');
    const userId = localStorage.getItem('userId');
    return {
      headers: {
        'user-id': userId || '',
        ...(token ? { Authorization: `Bearer ${token}` } : {}),
      },
    };
  },
});