import React from 'react';
import { ActiveType } from '../types/index'

interface DrawingToolbarProps {
  onStartDrawing: (type: ActiveType) => void;
  onStopDrawing: () => void;
  onClearLines: () => void;
  className?: string;
}

export const DrawingToolbar: React.FC<DrawingToolbarProps> = ({
  onStartDrawing,
  onStopDrawing,
  onClearLines,
  className = ''
}: DrawingToolbarProps) => {
  const [activeType, setActiveType] = React.useState<ActiveType | null>(null);

  const handleToolClick = (type: ActiveType) => {
    if (activeType === type) {
      setActiveType(null);
      onStopDrawing();
    } else {
      setActiveType(type);
      onStartDrawing(type);
    }
  };

  const handleClearClick = () => {
    setActiveType(null);
    onStopDrawing();
    onClearLines();
  };

  return (
    <div className={`flex items-center space-x-2 ${className}`}>
      <button
        onClick={() => handleToolClick(ActiveType.HORIZONTAL)}
        className={`px-3 py-1 text-sm font-medium rounded-md transition-colors
          ${activeType === ActiveType.HORIZONTAL
            ? 'bg-blue-600 text-white'
            : 'bg-gray-700 text-gray-200 hover:bg-gray-600'
          }`}
      >
        水平线
      </button>
      <button
        onClick={() => handleToolClick(ActiveType.TREND)}
        className={`px-3 py-1 text-sm font-medium rounded-md transition-colors
          ${activeType === ActiveType.TREND
            ? 'bg-blue-600 text-white'
            : 'bg-gray-700 text-gray-200 hover:bg-gray-600'
          }`}
      >
        斜横线
      </button>
      <button
        onClick={() => handleToolClick(ActiveType.TREND_EXTENDED)}
        className={`px-3 py-1 text-sm font-medium rounded-md transition-colors
          ${activeType === ActiveType.TREND_EXTENDED
            ? 'bg-blue-600 text-white'
            : 'bg-gray-700 text-gray-200 hover:bg-gray-600'
          }`}
      >
        趋势线
      </button>
      <button
        onClick={handleClearClick}
        className="px-3 py-1 text-sm font-medium text-gray-200 bg-red-600 rounded-md hover:bg-red-700 transition-colors"
      >
        清除
      </button>
    </div>
  );
}; 