/**
* Zustand store for Canada Visualizer state management
*/
import { create } from 'zustand';
import { EqualizationStep, TOTAL_EQUALIZATION_STEPS } from '@/lib/visualizer/equalization';
export type VisualizationType = 'seat-count' | 'voting-patterns' | 'turnout' | 'historical' | 'equalization';
export const VISUALIZATION_OPTIONS: { value: VisualizationType; labelKey: string; available: boolean }[] = [
{ value: 'seat-count', labelKey: 'visualizations.seatCount', available: true },
{ value: 'equalization', labelKey: 'visualizations.equalization', available: true },
{ value: 'voting-patterns', labelKey: 'visualizations.votingPatterns', available: false },
{ value: 'turnout', labelKey: 'visualizations.turnout', available: false },
{ value: 'historical', labelKey: 'visualizations.historical', available: false },
];
type SelectionSource = 'map' | 'table' | null;
interface VisualizerState {
// Visualization type
visualizationType: VisualizationType;
setVisualizationType: (type: VisualizationType) => void;
// Selected province
selectedProvince: string | null;
selectionSource: SelectionSource;
setSelectedProvince: (province: string | null, source?: SelectionSource) => void;
// Selected party (for seat count view)
selectedParty: string | null;
setSelectedParty: (party: string | null) => void;
// Hovered province (for tooltips)
hoveredProvince: string | null;
setHoveredProvince: (province: string | null) => void;
// Data table visibility
showDataTable: boolean;
toggleDataTable: () => void;
setShowDataTable: (show: boolean) => void;
// Maritime inset visibility
showMaritimeInset: boolean;
toggleMaritimeInset: () => void;
// Province labels visibility
showLabels: boolean;
toggleLabels: () => void;
// Mouse position for tooltip positioning
mousePosition: { x: number; y: number };
setMousePosition: (position: { x: number; y: number }) => void;
// Equalization explainer step
equalizationStep: EqualizationStep;
setEqualizationStep: (step: EqualizationStep) => void;
nextEqualizationStep: () => void;
prevEqualizationStep: () => void;
}
export const useVisualizerStore = create<VisualizerState>((set) => ({
// Visualization type
visualizationType: 'seat-count',
setVisualizationType: (type) => set({ visualizationType: type }),
// Selected province
selectedProvince: null,
selectionSource: null,
setSelectedProvince: (province, source = null) => set({ selectedProvince: province, selectionSource: source }),
// Selected party
selectedParty: null,
setSelectedParty: (party) => set({ selectedParty: party }),
// Hovered province
hoveredProvince: null,
setHoveredProvince: (province) => set({ hoveredProvince: province }),
// Data table visibility
showDataTable: true,
toggleDataTable: () => set((state) => ({ showDataTable: !state.showDataTable })),
setShowDataTable: (show) => set({ showDataTable: show }),
// Maritime inset visibility
showMaritimeInset: false,
toggleMaritimeInset: () => set((state) => ({ showMaritimeInset: !state.showMaritimeInset })),
// Province labels visibility
showLabels: true,
toggleLabels: () => set((state) => ({ showLabels: !state.showLabels })),
// Mouse position
mousePosition: { x: 0, y: 0 },
setMousePosition: (position) => set({ mousePosition: position }),
// Equalization explainer step
equalizationStep: 1,
setEqualizationStep: (step) => set({ equalizationStep: step }),
nextEqualizationStep: () => set((state) => ({
equalizationStep: Math.min(state.equalizationStep + 1, TOTAL_EQUALIZATION_STEPS) as EqualizationStep,
})),
prevEqualizationStep: () => set((state) => ({
equalizationStep: Math.max(state.equalizationStep - 1, 1) as EqualizationStep,
})),
}));
