import { getPriceChangeColor } from './chart-colors';

type CandlestickShapeProps = {
  cx?: number;
  payload?: {
    open: number;
    high: number;
    low: number;
    close: number;
  };
};

/**
 * Custom candlestick shape component for Recharts
 * Renders candlestick with wick and body
 */
export function CandlestickShape(props: CandlestickShapeProps) {
  const { cx, payload } = props;

  if (!payload || !cx) return null;

  const { open, high, low, close } = payload;
  const isPositive = close >= open;
  const color = getPriceChangeColor(close - open);

  // Calculate positions
  const bodyTop = Math.min(open, close);
  const bodyBottom = Math.max(open, close);
  const bodyHeight = Math.max(bodyBottom - bodyTop, 1);

  // Candlestick width
  const width = 8;

  return (
    <g>
      {/* Upper wick */}
      <line
        x1={cx}
        y1={high}
        x2={cx}
        y2={bodyTop}
        stroke={color}
        strokeWidth={1}
      />

      {/* Body */}
      <rect
        x={cx - width / 2}
        y={bodyTop}
        width={width}
        height={bodyHeight}
        fill={isPositive ? 'transparent' : color}
        stroke={color}
        strokeWidth={1}
      />

      {/* Lower wick */}
      <line
        x1={cx}
        y1={bodyBottom}
        x2={cx}
        y2={low}
        stroke={color}
        strokeWidth={1}
      />
    </g>
  );
}