import { ChartBarIcon } from '@heroicons/react/24/outline';
import type { ChartType, ChartInterval, ChartConfig } from '../types';

interface ChartToolbarProps {
  config: ChartConfig;
  onConfigChange: (config: Partial<ChartConfig>) => void;
}

const intervals: { value: ChartInterval; label: string }[] = [
  { value: '1m', label: '1m' },
  { value: '5m', label: '5m' },
  { value: '15m', label: '15m' },
  { value: '30m', label: '30m' },
  { value: '1h', label: '1H' },
  { value: '4h', label: '4H' },
  { value: '1d', label: '1D' },
  { value: '1w', label: '1W' },
  { value: '1M', label: '1M' },
];

const chartTypes: { value: ChartType; label: string; icon?: typeof ChartBarIcon }[] = [
  { value: 'candlestick', label: 'Candles' },
  { value: 'line', label: 'Line' },
  { value: 'area', label: 'Area' },
  { value: 'bar', label: 'Bars' },
];

export function ChartToolbar({ config, onConfigChange }: ChartToolbarProps) {
  return (
    <div className="flex items-center justify-between gap-2 bg-surface-secondary border-b border-border">
      <div className="flex items-center gap-2">
        {/* Interval Selector */}
        <div className="flex items-center gap-1 bg-background rounded-md border border-border p-0.5">
          {intervals.map(({ value, label }) => (
            <button
              key={value}
              onClick={() => onConfigChange({ interval: value })}
              className={`px-3 py-1 text-xs font-medium rounded transition-colors ${
                config.interval === value
                  ? 'bg-primary-500 text-white'
                  : 'text-text-secondary hover:text-text-primary hover:bg-surface-secondary'
              }`}
            >
              {label}
            </button>
          ))}
        </div>

        {/* Chart Type Selector */}
        <div className="flex items-center gap-1 bg-background rounded-md border border-border p-0.5">
          {chartTypes.map(({ value, label }) => (
            <button
              key={value}
              onClick={() => onConfigChange({ chartType: value })}
              className={`px-3 py-1 text-xs font-medium rounded transition-colors ${
                config.chartType === value
                  ? 'bg-primary-500 text-white'
                  : 'text-text-secondary hover:text-text-primary hover:bg-surface-secondary'
              }`}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      <div className="flex items-center gap-2">
        {/* Theme Toggle */}
        <button
          onClick={() => onConfigChange({ theme: config.theme === 'dark' ? 'light' : 'dark' })}
          className="px-3 py-1.5 bg-background text-text-secondary text-xs font-medium rounded-md border border-border hover:text-text-primary hover:border-primary-500/50 transition-colors"
        >
          {config.theme === 'dark' ? '☀️' : '🌙'}
        </button>
      </div>
    </div>
  );
}