/**
 * Structure Display Component
 *
 * A component that parses and displays a structure array
 * using individual StructureItem components
 */

import React, { useState } from 'react';
import StructureItem from './StructureItem';

interface StructureDisplayProps {
    structure: string | null;
    getString: (namespace: string, key: string, fallback: string) => string;
    maxWidth?: string;
    layout?: 'horizontal' | 'vertical';
}

const StructureDisplay: React.FC<StructureDisplayProps> = ({
    structure,
    getString,
    maxWidth = 'max-w-xs',
    layout = 'horizontal',
}) => {
    const [showAll, setShowAll] = useState(false);

    // Parse the structure string into an array
    let structureArray = [];
    try {
        structureArray = structure ? JSON.parse(structure) : [];
        if (!Array.isArray(structureArray)) {
            structureArray = [];
        }
    } catch (e) {
        console.error('Error parsing structure:', e);
    }

    // If no structure, show placeholder
    if (structureArray.length === 0) {
        return (
            <div className={`${maxWidth} text-wp-gray italic`}>
                {getString('table_cells', 'no_structure', 'No structure')}
            </div>
        );
    }

    // Render structure items
    const layoutClasses =
        layout === 'vertical'
            ? 'flex flex-col gap-2'
            : 'flex flex-wrap gap-1 items-start';

    const visibleCount = 3;
    const displayItems = showAll
        ? structureArray
        : structureArray.slice(0, visibleCount);
    const hiddenCount = Math.max(structureArray.length - visibleCount, 0);

    return (
        <div className={`${maxWidth} w-full`}>
            <div className={layoutClasses}>
                {displayItems.map((element: any, index: number) => (
                    <StructureItem
                        key={index}
                        element={element}
                        index={index}
                        getString={getString}
                    />
                ))}
                {hiddenCount > 0 && !showAll && (
                    <button
                        onClick={() => setShowAll(true)}
                        className="inline-flex items-center px-1.5 sm:px-2 py-0.5 sm:py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-md hover:bg-gray-200 cursor-pointer transition-colors"
                        title={`Click to show ${hiddenCount} more items`}
                    >
                        +{hiddenCount}{' '}
                        {getString('table_cells', 'more', 'more')}
                    </button>
                )}
                {showAll && hiddenCount > 0 && (
                    <button
                        onClick={() => setShowAll(false)}
                        className="inline-flex items-center px-1.5 sm:px-2 py-0.5 sm:py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-md hover:bg-gray-200 cursor-pointer transition-colors"
                    >
                        {getString('table_cells', 'show_less', 'Show less')}
                    </button>
                )}
            </div>
        </div>
    );
};

export default StructureDisplay;