import type { FC } from 'react';
import React from 'react';
import { Card } from '@theorchard/suite-components';
import { formatDate } from '@theorchard/suite-frontend';
import { EMPTY_CHAR, SONG_DATE_FORMAT } from 'src/constants';
import {
    CLASSNAME,
    renderItemLeft,
    renderItemRight,
} from 'src/pages/songPage/components/metadataPopup/metadataPopup';
import { capitalizeFirstLetter } 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 ProductMetadata: FC<Props> = ({ song, instance }) => {
    const primaryArtist = instance?.product
        ? instance.product.primaryArtists.map(p => p.name).join(', ')
        : EMPTY_CHAR;
    const featuredArtist =
        instance?.product?.featuredArtists &&
        instance.product.featuredArtists.length
            ? instance.product.featuredArtists.map(p => p.name).join(', ')
            : EMPTY_CHAR;

    return (
        <Card
            className={`${CLASSNAME}-product-metadata`}
            key={`${song.id}-product-metadata`}
        >
            <div className={`${CLASSNAME}-title`}>
                {$t(`ownershipRights.metadataPopup.reference`)}
            </div>
            <div className={`${CLASSNAME}-block`}>
                {renderItemLeft(
                    $t(`ownershipRights.metadataPopup.productName`),
                    instance?.product?.name ?? EMPTY_CHAR
                )}
                {renderItemRight(
                    $t(`ownershipRights.metadataPopup.upc`),
                    instance?.product?.upc ?? EMPTY_CHAR
                )}
            </div>
            <div className={`${CLASSNAME}-block`}>
                {renderItemLeft(
                    $t(`ownershipRights.metadataPopup.primaryArtist`),
                    primaryArtist
                )}
                {renderItemRight(
                    $t(`ownershipRights.metadataPopup.contentType`),
                    capitalizeFirstLetter(
                        instance?.product?.contentType ?? EMPTY_CHAR
                    )
                )}
            </div>
            <div className={`${CLASSNAME}-block`}>
                {renderItemLeft(
                    $t(`ownershipRights.metadataPopup.featuringArtist`),
                    featuredArtist
                )}
                {renderItemRight(
                    $t(`ownershipRights.metadataPopup.productType`),
                    capitalizeFirstLetter(instance?.recordingType ?? '') ??
                        EMPTY_CHAR
                )}
            </div>
            <div className={`${CLASSNAME}-block`}>
                {renderItemLeft(
                    $t(`ownershipRights.metadataPopup.displayArtistName`),
                    instance?.product?.displayArtistName ?? EMPTY_CHAR
                )}
                {renderItemRight(
                    $t(`ownershipRights.metadataPopup.productFormat`),
                    capitalizeFirstLetter(
                        instance?.product?.format ?? EMPTY_CHAR
                    )
                )}
            </div>
            <div className={`${CLASSNAME}-block`}>
                {renderItemLeft(
                    $t(`ownershipRights.metadataPopup.salesStartDate`),
                    formatDate(
                        instance?.product?.salesStartDate,
                        SONG_DATE_FORMAT
                    ) ?? EMPTY_CHAR
                )}
                {renderItemRight(
                    $t(`ownershipRights.metadataPopup.productSubtype`),
                    instance?.product?.subType
                        ? capitalizeFirstLetter(
                              instance.product.subType.split('_').join(' ')
                          )
                        : EMPTY_CHAR
                )}
            </div>
            <div className={`${CLASSNAME}-block`}>
                {renderItemLeft(
                    $t(`ownershipRights.metadataPopup.trackNumber`),
                    instance?.trackNumber?.toString() ?? EMPTY_CHAR
                )}
                {renderItemRight(
                    $t(`ownershipRights.metadataPopup.productVersion`),
                    instance?.product?.version ?? EMPTY_CHAR
                )}
            </div>
            <div className={`${CLASSNAME}-block`}>
                {renderItemLeft(
                    $t(`ownershipRights.metadataPopup.discNumber`),
                    instance?.discNumber?.toString() ?? EMPTY_CHAR
                )}
                {renderItemRight(
                    $t(`ownershipRights.metadataPopup.productCode`),
                    instance?.product?.code ?? EMPTY_CHAR
                )}
            </div>
        </Card>
    );
};

export default ProductMetadata;