import { useCallback, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';

import { parseViewerSearchParams, serializeViewerSearchParams } from '../utils/urlState';
import type { UrlViewState } from '../types/viewer';

export function useUrlViewState() {
  const [searchParams, setSearchParams] = useSearchParams();

  const viewState = useMemo(() => parseViewerSearchParams(searchParams), [searchParams]);

  const setViewState = useCallback(
    (nextState: Partial<UrlViewState>, options?: { replace?: boolean }) => {
      const mergedState: Partial<UrlViewState> = {
        ...viewState,
        ...nextState,
        hiddenPartIds: nextState.hiddenPartIds ?? viewState.hiddenPartIds,
        opacityByPartId: nextState.opacityByPartId ?? viewState.opacityByPartId
      };

      setSearchParams(serializeViewerSearchParams(mergedState), {
        replace: options?.replace ?? true
      });
    },
    [setSearchParams, viewState]
  );

  return {
    viewState,
    setViewState
  };
}