import Button from '../../ui/Button';

type Props = {
  timeframe: string;
  onTimeframeChange: (tf: string) => void;
  showIndicators: boolean;
  onToggleIndicators: () => void;
  showBuild: boolean;
  onToggleBuild: () => void;
  priceAutoScale: boolean;
  onTogglePriceAutoScale: () => void;
  seriesLabel: string;
  isFullscreen: boolean;
  onToggleFullscreen: () => void;
};

const timeframes = ['1s', '3s', '5s', '15s', '30s', '1m', '3m', '5m', '15m', '30m', '1h', '4h', '12h', '1d'] as const;

export default function ChartToolbar({
  timeframe,
  onTimeframeChange,
  showIndicators,
  onToggleIndicators,
  showBuild,
  onToggleBuild,
  priceAutoScale,
  onTogglePriceAutoScale,
  seriesLabel,
  isFullscreen,
  onToggleFullscreen,
}: Props) {
  return (
    <div className="chartToolbar">
      <div className="chartToolbar__group">
        {timeframes.map((tf) => (
          <Button
            key={tf}
            size="sm"
            variant={tf === timeframe ? 'primary' : 'ghost'}
            onClick={() => onTimeframeChange(tf)}
            type="button"
          >
            {tf}
          </Button>
        ))}
      </div>

      <div className="chartToolbar__group">
        <Button size="sm" variant={showIndicators ? 'primary' : 'ghost'} onClick={onToggleIndicators} type="button">
          Indicators
        </Button>
        <Button size="sm" variant={showBuild ? 'primary' : 'ghost'} onClick={onToggleBuild} type="button">
          Build
        </Button>
        <Button size="sm" variant={priceAutoScale ? 'primary' : 'ghost'} onClick={onTogglePriceAutoScale} type="button">
          Auto Scale
        </Button>
        <Button size="sm" variant={isFullscreen ? 'primary' : 'ghost'} onClick={onToggleFullscreen} type="button">
          {isFullscreen ? 'Exit' : 'Fullscreen'}
        </Button>
        <div className="chartToolbar__meta">{seriesLabel}</div>
      </div>
    </div>
  );
}