import React from 'react';
import { ActiveType } from '../types/index'
import { useIsMobile } from '@/client/hooks/use-mobile';

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

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

  // 使用统一的移动端检测Hook
  const isMobileHook = useIsMobile();
  const mobile = isMobile !== undefined ? isMobile : isMobileHook;

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

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

  // 移动端按钮样式
  const baseButtonClass = mobile
    ? "px-4 py-3 text-sm font-medium rounded-lg transition-all min-h-[44px] min-w-[80px]"
    : "px-3 py-1 text-sm font-medium rounded-md transition-colors";

  const activeButtonClass = 'bg-blue-600 text-white';
  const inactiveButtonClass = 'bg-gray-700 text-gray-200 hover:bg-gray-600';
  const clearButtonClass = `${baseButtonClass} text-gray-200 bg-red-600 hover:bg-red-700`;

  return (
    <div className={`flex items-center ${mobile ? 'space-x-3' : 'space-x-2'} ${className}`}>
      <button
        onClick={() => handleToolClick(ActiveType.HORIZONTAL)}
        className={`${baseButtonClass} ${activeType === ActiveType.HORIZONTAL ? activeButtonClass : inactiveButtonClass}`}
      >
        {mobile ? '水平' : '水平线'}
      </button>
      <button
        onClick={() => handleToolClick(ActiveType.TREND)}
        className={`${baseButtonClass} ${activeType === ActiveType.TREND ? activeButtonClass : inactiveButtonClass}`}
      >
        {mobile ? '斜线' : '斜横线'}
      </button>
      <button
        onClick={() => handleToolClick(ActiveType.TREND_EXTENDED)}
        className={`${baseButtonClass} ${activeType === ActiveType.TREND_EXTENDED ? activeButtonClass : inactiveButtonClass}`}
      >
        {mobile ? '趋势' : '趋势线'}
      </button>
      <button
        onClick={handleClearClick}
        className={clearButtonClass}
      >
        清除
      </button>
    </div>
  );
}; 