import type { FC } from 'react';
import React from 'react';
import { Card, GridTable } from '@theorchard/suite-components';
import { EMPTY_CHAR } from 'src/constants';
import { CLASSNAME } from 'src/pages/songPage/components/metadataPopup/metadataPopup';
import {
    capitalizeFirstLetter,
    formatContributorRelationship,
} from 'src/utils/formatter';
import { TextCell } from 'src/utils/tableCells';
import type { OwnershipNrSoundRecording } from 'src/data/queries';

interface Props {
    song: OwnershipNrSoundRecording;
}

export const CLASSNAME_TABLE = 'ContributorsTable';

const Contributors: FC<Props> = ({ song }) => {
    const contributors = song.contributions.map((item, index) => ({
        name: item.nrContributor.name,
        type: formatContributorRelationship(item.contributorRelationship),
        role: item.instruments
            ? item.instruments
                  .map(instrument => capitalizeFirstLetter(instrument))
                  .join(', ')
            : EMPTY_CHAR,
        number: index + 1,
    }));

    return (
        <Card
            className={`${CLASSNAME}-contributors`}
            key={`${song.id}-contributors`}
        >
            <div className={`${CLASSNAME}-title`}>
                {$t(`ownershipRights.metadataPopup.contributors`)}
            </div>
            <GridTable className={CLASSNAME_TABLE} data={contributors} bordered>
                <GridTable.Column
                    className={`${CLASSNAME_TABLE}-cell-number`}
                    title="#"
                    name="number"
                    Cell={TextCell}
                    maxWidth="20px"
                    fixed
                />
                <GridTable.Column
                    className={`${CLASSNAME}-cell-name`}
                    title={$t('ownershipRights.metadataPopup.contributorName')}
                    name="name"
                    Cell={TextCell}
                />
                <GridTable.Column
                    className={`${CLASSNAME}-cell-type`}
                    title={$t('ownershipRights.metadataPopup.contributorType')}
                    name="type"
                    Cell={TextCell}
                />
                <GridTable.Column
                    className={`${CLASSNAME}-cell-role`}
                    title={$t('ownershipRights.metadataPopup.contributorRole')}
                    name="role"
                    Cell={TextCell}
                />
            </GridTable>
        </Card>
    );
};

export default Contributors;