/**
* VisualizationSelector Component
* Dropdown to select which visualization to display on the Canada map
*/
'use client';
import React from 'react';
import { useTranslations } from 'next-intl';
import { ChevronDown, Lock } from 'lucide-react';
import { useVisualizerStore, VISUALIZATION_OPTIONS, VisualizationType } from '@/hooks/useVisualizerStore';
export function VisualizationSelector() {
const t = useTranslations('visualizer');
const { visualizationType, setVisualizationType } = useVisualizerStore();
const [isOpen, setIsOpen] = React.useState(false);
const dropdownRef = React.useRef<HTMLDivElement>(null);
// Close dropdown when clicking outside
React.useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const currentOption = VISUALIZATION_OPTIONS.find(opt => opt.value === visualizationType);
const handleSelect = (value: VisualizationType, available: boolean) => {
if (available) {
setVisualizationType(value);
setIsOpen(false);
}
};
return (
<div className="relative" ref={dropdownRef}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-border-subtle rounded-lg text-sm font-medium text-text-primary hover:bg-bg-elevated transition-colors min-w-[180px]"
>
<span className="flex-1 text-left">
{currentOption ? t(currentOption.labelKey) : t('visualizations.seatCount')}
</span>
<ChevronDown className={`w-4 h-4 text-text-tertiary transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
{isOpen && (
<div className="absolute top-full left-0 mt-1 w-full bg-bg-elevated border border-border-subtle rounded-lg shadow-lg overflow-hidden z-50">
{VISUALIZATION_OPTIONS.map((option) => (
<button
key={option.value}
onClick={() => handleSelect(option.value, option.available)}
disabled={!option.available}
className={`
w-full flex items-center justify-between px-4 py-2.5 text-sm text-left transition-colors
${option.value === visualizationType
? 'bg-accent-red/10 text-accent-red'
: option.available
? 'text-text-primary hover:bg-bg-secondary'
: 'text-text-tertiary cursor-not-allowed'
}
`}
>
<span>{t(option.labelKey)}</span>
{!option.available && (
<Lock className="w-3.5 h-3.5 text-text-tertiary" />
)}
</button>
))}
</div>
)}
</div>
);
}
