import React from 'react';
import GenericErrorReport from './genericErrorReport';
import { type Product } from './types';
import type { EntityType } from './types';

export const ProductErrorReport = ({ product }: { product: Product }) => {
    const renderTrackErrors = (entity: EntityType) => {
        if (!('tracks' in entity)) return null;

        const tracks = (entity.tracks || []).filter(
            track => track.errors.length > 0
        );

        if (tracks.length === 0) return null;

        return (
            <div className="product-error-report-tracks">
                <h6>
                    {$t('bulkDigitalAudio.metadataErrorReport.trackErrors')}
                </h6>
                <ul className="no-bullets">
                    {tracks.map(({ number, name, errors }, index) => (
                        <li key={index}>
                            <h6>
                                {number}. {name}
                            </h6>
                            <ul>
                                {errors.map((error, index) => (
                                    <li key={index}>
                                        <strong>{error.column}:</strong>{' '}
                                        {error.message} (
                                        {$t(
                                            'bulkDigitalAudio.metadataErrorReport.value'
                                        )}
                                        : {error.value})
                                    </li>
                                ))}
                            </ul>
                        </li>
                    ))}
                </ul>
            </div>
        );
    };

    return (
        <GenericErrorReport
            entity={product}
            renderAdditionalErrors={renderTrackErrors}
            title={$t('bulkDigitalAudio.metadataErrorReport.productErrors')}
        />
    );
};

export default ProductErrorReport;