import React, { useMemo } from 'react';
import './PullToRefreshIndicator.css';

interface Props {
  pullDistance: number;
  threshold: number;
  refreshing: boolean;
}

export const PullToRefreshIndicator: React.FC<Props> = ({ pullDistance, threshold, refreshing }) => {
  const progress = Math.min(1, pullDistance / threshold);
  const size = 24;
  const stroke = 3;
  const radius = (size - stroke) / 2;
  const circumference = 2 * Math.PI * radius;
  const dash = useMemo(() => circumference * progress * 0.85, [circumference, progress]);

  return (
    <div className="ptr-indicator" aria-hidden>
      <svg
        className={refreshing ? 'spinner' : ''}
        width={size}
        height={size}
        viewBox={`0 0 ${size} ${size}`}
      >
        <circle
          className="track"
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeWidth={stroke}
          fill="none"
        />
        <circle
          className="progress"
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeWidth={stroke}
          strokeDasharray={`${dash} ${circumference}`}
          strokeDashoffset={circumference * 0.1}
          strokeLinecap="round"
          fill="none"
          style={{ transform: `rotate(${progress * 180}deg)` }}
        />
        {!refreshing && (
          <g className="arrow" style={{ transform: `translate(12px, 12px) rotate(${progress * 180}deg)` }}>
            <path d="M -4 0 L 0 -4 L 4 0" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
          </g>
        )}
      </svg>
    </div>
  );
};