import { useQuery } from '@tanstack/react-query';
import { pick } from 'remeda';

// 🙁 You need to maintain path params type as they change in the url, 
// no automatic type updates based on the url
type EventCategoryType = {
  year: string;
  typeId: string;
  categoryId: string;
  filter?: string;
  page?: string;
  size?: string;
}

const useEventCategory = (params: EventCategoryType) => {
  return useQuery({
    queryKey: ['event', 'type', 'category', params],
    queryFn: async () => {
      // 🙁 Here you need to handle searchParams separately
      const searchParams = new URLSearchParams(pick(params, ['filter', 'page', 'size']));

      // 😩 Tedious url build, hard to read if there is more than two path params
      const response = await fetch(`demo/event/${params.year}/type/${params.typeId}/category/${params.categoryId}?${searchParams.toString()}`);

      return response.json();
    }
  })
}

import { useQuery } from '@tanstack/react-query';
import { type ExtractParams, lunalink } from '@bearstudio/lunalink';

const eventCategoryIdRoute = 'demo/event/:year/type/:typeId/category/:categoryId';

// 👍 Let lunalink detect path params given your url, and add your custom searchParams
// The type will always be up to date with path params declared in your url
type EventCategoryIdRouteType = ExtractParams<typeof eventCategoryIdRoute> & {
  filter?: string;
  page?: string;
  size?: string;
};

const useEventCategory = (params: EventCategoryIdRouteType) => {
  return useQuery({
    queryKey: ['event', 'type', 'category', params],
    queryFn: async () => {
      // 👍 Lunalink will replace path params with their values from the params object, 
      // based on how they are defined in eventCategoryIdRoute. 
      // And leftovers will be passed as search params.
      // No more custom url concatenation!
      const response = await fetch(lunalink(eventCategoryIdRoute, params));
      return response.json();
    },
  });
};

useEventCategory({
  year: '2025',
  typeId: 'event',
  categoryId: 'track',
  page: '3',
  size: '10',
});
// Called url will look like this: 'demo/event/2025/type/event/category/track?page=3&size=10'

import { lunalink } from '@bearstudio/lunalink';

// lunalink(path, variables, config);

// returns 'a/path/with/a-variable'
lunalink('a/path/with/:variables', { variables: 'a-variable' });

// returns 'a/path/with/a-variable?anotherVar=3'
lunalink('a/path/with/:variables', { variables: 'a-variable', anotherVar: '3' });

// returns 'a/path/my-file.pdf'
lunalink('a/path/:fileName.:ext', { fileName: 'my-file', ext: 'pdf' });

// returns 'https://my.api.com/a/path/with/a-variable'
lunalink(
  'a/path/with/:variables',
  { variables: 'a-variable' },
  { baseURL: 'https://my.api.com' }, // trailing slash is not mandatory
);

// You can override the default encodeURIComponent() method used to encode
// path params
// returns 'a/path/with/A-VARIABLE'
lunalink(
  'a/path/with/:variables',
  { variables: 'a-variable' },
  { 
    encodeURIComponent: (pathParamValue) => {
      return pathParamValue.toLocalUpperCase();
    },
  },
);

import { ExtractParams } from '@bearstudio/lunalink';

type MyURLPathParams = ExtractParams<'a/path/with/:variable'>;
// type MyURLPathParams = {
//   variable: string;
// };

const url = 'a/path/:fileName.:ext'
type AnotherURLPathParams = ExtractParams<typeof url>;
// type AnotherURLPathParams = {
//   fileName: string;
//   ext: string;
// };

import { join } from '@bearstudio/lunalink';