/**
 * Structure Item Component
 *
 * A reusable component for rendering individual structure elements
 * with appropriate styling and labels
 */

import React from 'react';

interface StructureItemProps {
    element: any;
    index: number;
    getString: (namespace: string, key: string, fallback: string) => string;
}

const StructureItem: React.FC<StructureItemProps> = ({
    element,
    index,
    getString,
}) => {
    // Helper function to get label for structure type
    const getStructureTypeLabel = (type: string): string => {
        const typeLabels: { [key: string]: string } = {
            excerpt_tldr: getString(
                'dynamic_list',
                'excerpt_tldr',
                'Excerpt / TL;DR'
            ),
            paragraph: getString('dynamic_list', 'paragraph', 'Subtopic'),
            conclusion_summary: getString(
                'dynamic_list',
                'conclusion_summary',
                'Conclusion / summary'
            ),
            key_takeaways: getString(
                'dynamic_list',
                'key_takeaways',
                'Key Takeaways'
            ),
            faq: getString('dynamic_list', 'faq', 'FAQ'),
        };

        return typeLabels[type] || type;
    };

    // Helper function to get background color for different structure types
    const getStructureElementStyle = (element: any) => {
        // Get the type from the element
        let elementType;
        if (typeof element === 'string') {
            // For strings, determine type based on content
            if (
                element === 'excerpt_tldr' ||
                element === 'conclusion_summary' ||
                element === 'key_takeaways' ||
                element === 'faq'
            ) {
                elementType = element;
            } else {
                // Any other string is treated as a subtopic
                elementType = 'paragraph';
            }
        } else if (typeof element === 'object' && element !== null) {
            elementType = element.type;
        } else {
            elementType = String(element);
        }

        // Map specific types to colors
        const typeColors: { [key: string]: string } = {
            excerpt_tldr: 'bg-blue-100 text-blue-800 border-blue-200',
            paragraph: 'bg-green-100 text-green-800 border-green-200',
            conclusion_summary:
                'bg-purple-100 text-purple-800 border-purple-200',
            key_takeaways: 'bg-yellow-100 text-yellow-800 border-yellow-200',
            faq: 'bg-orange-100 text-orange-800 border-orange-200',
        };

        // Return specific color for known types, or default for unknown
        return (
            typeColors[elementType] ||
            'bg-gray-100 text-gray-800 border-gray-200'
        );
    };

    // Get the element type and subtitle
    let elementType;
    if (typeof element === 'string') {
        // For strings, determine type based on content
        if (
            element === 'excerpt_tldr' ||
            element === 'conclusion_summary' ||
            element === 'key_takeaways' ||
            element === 'faq'
        ) {
            elementType = element;
        } else {
            // Any other string is treated as a subtopic
            elementType = 'paragraph';
        }
    } else if (typeof element === 'object' && element !== null) {
        elementType = element.type;
    } else {
        elementType = String(element);
    }
    const elementSubtitle =
        typeof element === 'object' && element !== null ? element.subtitle : '';

    // Get the translatable label for the type
    const typeLabel = getStructureTypeLabel(elementType);

    // Handle different cases for display text
    let displayText = typeLabel;

    if (elementType === 'paragraph' && elementSubtitle) {
        // Object format: "Subtopic: subtitle"
        displayText = `${typeLabel}: ${elementSubtitle}`;
    } else if (
        typeof element === 'string' &&
        element !== 'excerpt_tldr' &&
        element !== 'conclusion_summary' &&
        element !== 'key_takeaways' &&
        element !== 'faq'
    ) {
        // String format: treat as subtopic with the string as the title
        displayText = `${typeLabel}: ${element}`;
    }

    return (
        <span
            key={index}
            className={`inline-block px-1.5 sm:px-2 py-0.5 sm:py-1 text-xs font-medium rounded-md border break-words whitespace-normal ${getStructureElementStyle(
                element
            )}`}
            title={displayText}
            style={{ maxWidth: '100%' }}
        >
            {displayText}
        </span>
    );
};

export default StructureItem;