import React, { useRef } from 'react';
import { Box } from '@mui/material';

export interface FibonacciCircleObject {
  id: string;
  type: 'fibonacciCircle';
  centerX: number;
  centerY: number;
  radius: number;
  settings: {
    color: string;
    lineWidth: number;
    lineStyle: 'solid' | 'dashed' | 'dotted';
    fillOpacity: number;
    levels: number[];
    showLabels: boolean;
  };
}

interface FibonacciCircleProps {
  objects: FibonacciCircleObject[];
  chartWidth: number;
  chartHeight: number;
  totalChartHeight?: number;
  timeToX: (time: number) => number | null;
  priceToY: (price: number) => number | null;
  onClick?: (objectId: string, event: React.MouseEvent) => void;
  onDoubleClick?: (objectId: string) => void;
  onDragStart?: (objectId: string, startX: number, startTime: number) => void;
}

const FibonacciCircle: React.FC<FibonacciCircleProps> = ({
  objects,
  chartWidth,
  chartHeight,
  totalChartHeight,
  timeToX,
  priceToY,
  onClick,
  onDoubleClick,
  onDragStart,
}) => {
  const svgRef = useRef<SVGSVGElement>(null);

  const calculateCircleLevels = (radius: number, levels: number[]) => {
    return levels.map(level => ({
      level,
      radius: radius * level
    }));
  };

  const renderCircle = (circleObject: FibonacciCircleObject) => {
    const circleLevels = calculateCircleLevels(circleObject.radius, circleObject.settings.levels);
    
    return (
      <g key={circleObject.id}>
        {circleLevels.map((circleLevel, index) => {
          const strokeDasharray = circleObject.settings.lineStyle === 'dashed' 
            ? '5,5' 
            : circleObject.settings.lineStyle === 'dotted' 
            ? '2,2' 
            : undefined;
          
          return (
            <g key={index}>
              <circle
                cx={circleObject.centerX}
                cy={circleObject.centerY}
                r={circleLevel.radius}
                fill="none"
                stroke={circleObject.settings.color}
                strokeWidth={circleObject.settings.lineWidth}
                strokeDasharray={strokeDasharray}
                fillOpacity={circleObject.settings.fillOpacity}
                opacity={0.8}
                style={{ cursor: 'pointer' }}
                onClick={(e) => onClick?.(circleObject.id, e)}
                onDoubleClick={() => onDoubleClick?.(circleObject.id)}
              />
              {circleObject.settings.showLabels && (
                <text
                  x={circleObject.centerX + circleLevel.radius + 5}
                  y={circleObject.centerY}
                  fill={circleObject.settings.color}
                  fontSize={10}
                  fontFamily="Arial, sans-serif"
                >
                  {`${(circleLevel.level * 100).toFixed(1)}%`}
                </text>
              )}
            </g>
          );
        })}
      </g>
    );
  };

  return (
    <Box
      sx={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: chartWidth,
        height: totalChartHeight || chartHeight,
        pointerEvents: 'none',
        zIndex: 100,
      }}
    >
      <svg
        ref={svgRef}
        width={chartWidth}
        height={totalChartHeight || chartHeight}
        style={{ position: 'absolute', top: 0, left: 0 }}
      >
        <g style={{ pointerEvents: 'all' }}>
          {objects.map(renderCircle)}
        </g>
      </svg>
    </Box>
  );
};

export default FibonacciCircle;
