import type { FC } from 'react';
import React from 'react';
import { Card, TruncatedText } from '@theorchard/suite-components';
import { EMPTY_CHAR } from 'src/constants';
import {
    CLASSNAME,
    renderItem,
} from 'src/pages/songPage/components/metadataPopup/metadataPopup';
import { getDuration } 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 Metadata: FC<Props> = ({ song, instance }) => {
    const countryOfRecording = song.countriesOfRecording
        .map(item => item.countryName)
        .join(', ');
    const countryOfFunding = song.countriesOfFunding
        .map(item => item.countryName)
        .join(', ');

    return (
        <Card className={`${CLASSNAME}-metadata`} key={`${song.id}-metadata`}>
            <div className={`${CLASSNAME}-title`}>
                {$t(`ownershipRights.metadataPopup.metadata`)}
            </div>
            {renderItem(
                $t(`ownershipRights.metadataPopup.isrc`),
                instance?.isrc ?? EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.duration`),
                getDuration(song.duration)
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.yearOfRec`),
                song.firstRecordingYear.toString()
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.yearOfRelease`),
                song.firstReleaseYear.toString()
            )}
            <div className={`${CLASSNAME}-item`}>
                <span className={`${CLASSNAME}-item-key`}>
                    <TruncatedText
                        text={$t(
                            `ownershipRights.metadataPopup.countryOfLabel`
                        )}
                        maxWidth={250}
                    />
                </span>
                <span className={`${CLASSNAME}-item-value`}>
                    {countryOfFunding}
                </span>
            </div>
            {renderItem(
                $t(`ownershipRights.metadataPopup.countryOfRec`),
                countryOfRecording
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.audioLanguage`),
                song.audioLanguage ?? EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.associatedIsrc`),
                instance?.associatedAudioIsrc ?? EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.account`),
                instance?.vendor ?? EMPTY_CHAR
            )}
            {renderItem(
                $t(`ownershipRights.metadataPopup.entity`),
                instance?.owner ?? EMPTY_CHAR
            )}
        </Card>
    );
};

export default Metadata;