import type { FC } from 'react';
import React from 'react';
import { Card } from '@theorchard/suite-components';
import { EMPTY_CHAR } from 'src/constants';
import {
    CLASSNAME,
    renderItem,
} from 'src/pages/songPage/components/metadataPopup/metadataPopup';
import { formatNameVersion } from 'src/utils/formatter';
import type { OwnershipNrSoundRecording } from 'src/data/queries/getOwnershipNrSoundRecording';
import type { OwnershipNrTrack } from 'src/data/queries/getOwnershipNrTracks';

interface Props {
    song: OwnershipNrSoundRecording;
    instance: OwnershipNrTrack | null;
}

const Basics: FC<Props> = ({ song, instance }) => {
    const primaryArtist = song.primaryArtists.map(item => item.name).join(', ');
    const featuredArtist =
        song.featuredArtists && song.featuredArtists?.length > 0
            ? song.featuredArtists?.map(item => item.name).join(', ')
            : EMPTY_CHAR;
    const displayComposer = song.displayComposer
        ? song.displayComposer?.join(', ')
        : EMPTY_CHAR;
    const yesString = $t('ownershipRights.metadataPopup.yes');
    const noString = $t('ownershipRights.metadataPopup.no');
    const explicit = song.explicit ? yesString : noString;

    return (
        <Card className={`${CLASSNAME}-basics`} key={`${song.id}-basics`}>
            <div className={`${CLASSNAME}-title`}>
                {$t(`ownershipRights.metadataPopup.basics`)}
            </div>
            {renderItem(
                $t(`ownershipRights.metadataPopup.songName`),
                formatNameVersion(
                    instance?.title ?? '',
                    instance?.version ?? ''
                ) ?? EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.version`),
                instance?.version ?? EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.primaryArtist`),
                song.primaryArtists ? primaryArtist : EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.featuringArtist`),
                featuredArtist
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.displayArtistName`),
                song.displayArtistName ? song.displayArtistName : EMPTY_CHAR
            )}
            {renderItem($t(`ownershipRights.metadataPopup.explicit`), explicit)}
            {renderItem(
                $t(`ownershipRights.metadataPopup.genre`),
                song.genre ?? EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.composer`),
                displayComposer
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.imprint`),
                instance?.product?.imprint ?? EMPTY_CHAR
            )}
        </Card>
    );
};

export default Basics;