import React, { useMemo } from 'react';
import { ContractTermFormattedPresentational } from 'src/types/contract-term';
import { SectionPresentationalGroupItem } from './contract-term-details-presentational-group-item';

export interface ContractTermPresentationalGroupsPropTypes {
    contractTermFormattedDataList: ContractTermFormattedPresentational[];
    className: string;
}

const ContractTermPresentationalGroups: React.FC<
    ContractTermPresentationalGroupsPropTypes
> = ({ contractTermFormattedDataList, className }) => {
    const renderSectionItems = useMemo(() => {
        return contractTermFormattedDataList.flatMap(
            (
                contractTermFormattedDataObject,
                contractTermFormattedDataListIndex
            ) =>
                contractTermFormattedDataObject.details.map(
                    (detail, detailIndex) => (
                        <SectionPresentationalGroupItem
                            key={`${contractTermFormattedDataListIndex}-${detailIndex}`}
                            detail={detail}
                            detailIndex={detailIndex}
                            contractTermFormattedDataListIndex={
                                contractTermFormattedDataListIndex
                            }
                            lastGroup={
                                detailIndex + 1 ===
                                contractTermFormattedDataObject.details.length
                            }
                        />
                    )
                )
        );
    }, [contractTermFormattedDataList]);

    return (
        <div
            className={className}
            data-testid="PresentationalGroupEmptySection"
        >
            {renderSectionItems}
        </div>
    );
};

export default ContractTermPresentationalGroups;