import React from 'react'
import type {Indicator, IndicatorType} from '../../../generated/ManagingApi'
import {SignalType} from '../../../generated/ManagingApi'

interface IndicatorsDisplayProps {
    indicators: Indicator[]
    className?: string
}

// Helper function to get indicator parameters from scenario indicators
const getIndicatorParameters = (indicator: Indicator) => {
    if (!indicator) return null;
    
    return {
        name: indicator.name || 'Unnamed Indicator',
        type: indicator.type,
        signalType: indicator.signalType,
        period: indicator.period,
        fastPeriods: indicator.fastPeriods,
        slowPeriods: indicator.slowPeriods,
        signalPeriods: indicator.signalPeriods,
        multiplier: indicator.multiplier,
        smoothPeriods: indicator.smoothPeriods,
        stochPeriods: indicator.stochPeriods,
        cyclePeriods: indicator.cyclePeriods
    };
};

// Helper function to get badge color based on signal type
const getBadgeColor = (signalType: SignalType) => {
    switch (signalType) {
        case SignalType.Signal:
            return 'badge-primary';
        case SignalType.Trend:
            return 'badge-secondary';
        case SignalType.Context:
            return 'badge-accent';
        default:
            return 'badge-neutral';
    }
};

// Helper function to format indicator type for display
const formatIndicatorType = (type: IndicatorType) => {
    return type.length > 0 ? type.replace(/([A-Z])/g, ' $1').trim() : 'Unknown';
};

const IndicatorsDisplay: React.FC<IndicatorsDisplayProps> = ({ indicators, className = "" }) => {
    const processedIndicators = indicators.map(getIndicatorParameters).filter(Boolean);
    
    return (
        <div className={`flex flex-wrap gap-1 ${className}`}>
            {processedIndicators.map((indicator: any, index: number) => {
                if (!indicator) return null;
                
                // Build tooltip content with indicator parameters
                const tooltipContent = `
                    ${indicator.period ? `Period: ${indicator.period}` : ''}
                    ${indicator.fastPeriods ? `Fast: ${indicator.fastPeriods}` : ''}
                    ${indicator.slowPeriods ? `Slow: ${indicator.slowPeriods}` : ''}
                    ${indicator.signalPeriods ? `Signal: ${indicator.signalPeriods}` : ''}
                    ${indicator.multiplier ? `Multiplier: ${indicator.multiplier}` : ''}
                    ${indicator.smoothPeriods ? `Smooth: ${indicator.smoothPeriods}` : ''}
                    ${indicator.stochPeriods ? `Stoch: ${indicator.stochPeriods}` : ''}
                    ${indicator.cyclePeriods ? `Cycle: ${indicator.cyclePeriods}` : ''}
                `.trim().replace(/\n\s+/g, '\n');
                
                return (
                    <div key={index} className="tooltip" data-tip={tooltipContent}>
                        <div className={`badge ${getBadgeColor(indicator.signalType)} badge-sm`}>
                            {formatIndicatorType(indicator.type)}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default IndicatorsDisplay; 