import { useMatch } from 'react-router-dom';
import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
import { ScreenSize, useScreenSizeContext } from './useScreenSize';

/** Skinny window layout (≤750px): master-detail instead of 3-column desktop. */
export const useCompactNav = (): boolean => {
  const screenSize = useScreenSizeContext();
  return screenSize === ScreenSize.Mobile;
};

/** Routes where sidebar + channel list are shown together (no room/content pane). */
export const useIsCompactListRoute = (): boolean => {
  const homeMatch = useMatch({ path: HOME_PATH, caseSensitive: true, end: true });
  const directMatch = useMatch({ path: DIRECT_PATH, caseSensitive: true, end: true });
  const spaceMatch = useMatch({ path: SPACE_PATH, caseSensitive: true, end: true });
  const exploreMatch = useMatch({ path: EXPLORE_PATH, caseSensitive: true, end: true });
  const inboxMatch = useMatch({ path: INBOX_PATH, caseSensitive: true, end: true });

  return !!(homeMatch || directMatch || spaceMatch || exploreMatch || inboxMatch);
};

export const useShowCompactMasterView = (): boolean => {
  const compact = useCompactNav();
  const isListRoute = useIsCompactListRoute();
  return compact && isListRoute;
};