kandev/apps/web/hooks/use-kanban-display-settings.ts

'use client';

import { useCallback } from 'react';
import { useAppStore } from '@/components/state-provider';
import { useUserDisplaySettings } from '@/hooks/use-user-display-settings';
import type { WorkflowsState } from '@/lib/state/slices';

/**
 * Custom hook that consolidates all kanban display settings and eliminates prop drilling.
 * This hook provides access to workspaces, workflows, repositories, and preview settings,
 * along with handlers for changing these settings.
 */
export function useKanbanDisplaySettings() {
  // Access store directly
  const workspaces = useAppStore((state) => state.workspaces.items);
  const activeWorkspaceId = useAppStore((state) => state.workspaces.activeId);
  const workflows = useAppStore((state) => state.workflows.items);
  const activeWorkflowId = useAppStore((state) => state.workflows.activeId);
  const setActiveWorkspace = useAppStore((state) => state.setActiveWorkspace);
  const setActiveWorkflow = useAppStore((state) => state.setActiveWorkflow);

  // Use existing compound hook for user settings
  const {
    settings: userSettings,
    commitSettings,
    repositories,
    repositoriesLoading,
    allRepositoriesSelected,
  } = useUserDisplaySettings({
    workspaceId: activeWorkspaceId,
    workflowId: activeWorkflowId,
  });

  // Get preview setting from store
  const enablePreviewOnClick = useAppStore((state) => state.userSettings.enablePreviewOnClick);

  // Use pushState instead of router.push to avoid triggering SSR re-fetches.
  // Filter changes only update client state; all data is already available.
  const handleWorkspaceChange = useCallback(
    (nextWorkspaceId: string | null) => {
      setActiveWorkspace(nextWorkspaceId);
      const url = nextWorkspaceId ? `/?workspaceId=${nextWorkspaceId}` : '/';
      window.history.pushState({}, '', url);
      commitSettings({
        workspaceId: nextWorkspaceId,
        workflowId: null,
        repositoryIds: [],
      });
    },
    [setActiveWorkspace, commitSettings]
  );

  const handleWorkflowChange = useCallback(
    (nextWorkflowId: string | null) => {
      setActiveWorkflow(nextWorkflowId);
      if (nextWorkflowId) {
        const workspaceId = workflows.find((workflow: WorkflowsState['items'][number]) => workflow.id === nextWorkflowId)?.workspaceId;
        const workspaceParam = workspaceId ? `&workspaceId=${workspaceId}` : '';
        window.history.pushState({}, '', `/?workflowId=${nextWorkflowId}${workspaceParam}`);
      } else if (activeWorkspaceId) {
        window.history.pushState({}, '', `/?workspaceId=${activeWorkspaceId}`);
      }
      commitSettings({
        workspaceId: userSettings.workspaceId,
        workflowId: nextWorkflowId,
        repositoryIds: userSettings.repositoryIds,
      });
    },
    [setActiveWorkflow, workflows, commitSettings, userSettings.workspaceId, userSettings.repositoryIds, activeWorkspaceId]
  );

  const handleRepositoryChange = useCallback(
    (value: string | 'all') => {
      if (value === 'all') {
        commitSettings({
          workspaceId: userSettings.workspaceId,
          workflowId: userSettings.workflowId,
          repositoryIds: [],
        });
        return;
      }
      commitSettings({
        workspaceId: userSettings.workspaceId,
        workflowId: userSettings.workflowId,
        repositoryIds: [value],
      });
    },
    [commitSettings, userSettings.workspaceId, userSettings.workflowId]
  );

  const handleTogglePreviewOnClick = useCallback(
    (enabled: boolean) => {
      commitSettings({
        workspaceId: userSettings.workspaceId,
        workflowId: userSettings.workflowId,
        repositoryIds: userSettings.repositoryIds,
        enablePreviewOnClick: enabled,
      });
    },
    [commitSettings, userSettings.workflowId, userSettings.repositoryIds, userSettings.workspaceId]
  );

  const handleViewModeChange = useCallback(
    (mode: string) => {
      commitSettings({
        workspaceId: userSettings.workspaceId,
        workflowId: userSettings.workflowId,
        repositoryIds: userSettings.repositoryIds,
        kanbanViewMode: mode || null,
      });
    },
    [commitSettings, userSettings.workspaceId, userSettings.workflowId, userSettings.repositoryIds]
  );

  return {
    // Data
    workspaces,
    workflows,
    activeWorkspaceId,
    activeWorkflowId,
    repositories,
    repositoriesLoading,
    allRepositoriesSelected,
    selectedRepositoryId: userSettings.repositoryIds[0] ?? null,
    enablePreviewOnClick,
    kanbanViewMode: userSettings.kanbanViewMode,

    // Handlers
    onWorkspaceChange: handleWorkspaceChange,
    onWorkflowChange: handleWorkflowChange,
    onRepositoryChange: handleRepositoryChange,
    onTogglePreviewOnClick: handleTogglePreviewOnClick,
    onViewModeChange: handleViewModeChange,
  };
}