import React from 'react';
import { HelpTooltip } from '@theorchard/suite-components';
import { drop, take } from 'lodash';
import type { Agreement } from 'src/data/queries/compositions/types';

const CLASSNAME = 'SongWritersList';

interface Props {
    agreements: Agreement[];
}

const SongWritersList: React.FC<Props> = ({ agreements }) => {
    if (agreements.length === 0)
        return <div className="none">{$t('common.noneAdded')}</div>;

    const tags = take(agreements, 3).map(
        ({ agreement: { controlled, songWriter } }) => (
            <React.Fragment key={songWriter?.id}>
                <div
                    className={`${CLASSNAME}-tag ${
                        controlled ? '' : `${CLASSNAME}-tag-uncontrolled`
                    }`}
                >
                    {songWriter?.legalName || ''}
                </div>
            </React.Fragment>
        )
    );

    if (agreements.length > 3)
        return (
            <div>
                {tags}

                <HelpTooltip
                    message={drop(agreements, 3)
                        .map(
                            ({ agreement: { songWriter } }) =>
                                songWriter.legalName
                        )
                        .join(', ')}
                    id="songwriters-tooltip"
                >
                    <span className={`${CLASSNAME}-more-link`}>
                        {' '}
                        + {agreements.length - 3}{' '}
                        <span className={`${CLASSNAME}-more-link-word`}>
                            {$t('common.more')}
                        </span>
                    </span>
                </HelpTooltip>
            </div>
        );

    return <>{tags}</>;
};

export default SongWritersList;