5chan/src/hooks/use-initial-theme.ts

import { useMemo } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import useThemeStore from '../stores/use-theme-store';
import { useDirectories } from './use-directories';
import { isAllView, isHomeView, isNotFoundView, isPendingPostView, isSubscriptionsView, isModView } from '../lib/utils/view-utils';
import { getSubplebbitAddress } from '../lib/utils/route-utils';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';

const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
  const location = useLocation();
  const { boardIdentifier, accountCommentIndex } = useParams<{ boardIdentifier: string; accountCommentIndex?: string }>();
  const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
  const pendingPost = useAccountComment({ commentIndex });
  // Subscribe to the actual themes data, not just functions
  const themes = useThemeStore((state) => state.themes);
  const directories = useDirectories();
  const params = useParams();
  const isInHomeView = isHomeView(location.pathname);
  const isInNotFoundView = isNotFoundView(location.pathname, params);
  const isInAllView = isAllView(location.pathname);
  const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
  const isInModView = isModView(location.pathname);
  const isInPendingPostView = isPendingPostView(location.pathname, params);

  const paramsSubplebbitAddress = boardIdentifier ? getSubplebbitAddress(boardIdentifier, directories) : undefined;

  const initialTheme = useMemo(() => {
    let theme = 'yotsuba';

    if (isInPendingPostView) {
      const subplebbitAddress = pendingPostSubplebbitAddress || pendingPost?.subplebbitAddress;
      if (subplebbitAddress) {
        const community = directories.find((s) => s.address === subplebbitAddress);
        if (community?.nsfw) {
          theme = themes.nsfw || 'yotsuba';
        } else {
          theme = themes.sfw || 'yotsuba-b';
        }
      } else {
        theme = 'yotsuba';
      }
    } else if (isInAllView || isInSubscriptionsView || isInModView) {
      theme = themes.sfw || 'yotsuba-b';
    } else if (isInHomeView || isInNotFoundView) {
      theme = 'yotsuba';
    } else if (paramsSubplebbitAddress) {
      const community = directories.find((s) => s.address === paramsSubplebbitAddress);
      if (community?.nsfw) {
        theme = themes.nsfw || 'yotsuba';
      } else {
        theme = themes.sfw || 'yotsuba-b';
      }
    }

    return theme;
  }, [
    isInPendingPostView,
    isInAllView,
    isInSubscriptionsView,
    isInModView,
    isInHomeView,
    isInNotFoundView,
    paramsSubplebbitAddress,
    themes,
    directories,
    pendingPostSubplebbitAddress,
    pendingPost,
  ]);

  return initialTheme;
};

export default useInitialTheme;