import type { FC } from 'react';
import React from 'react';
import { filterData, Page } from '@theorchard/suite-frontend';
import DataList from 'src/components/dataList';
import { EMPTY_CHAR, ROUTE_SONG } from 'src/constants';
import { formatNameVersion } from 'src/utils/formatter';
import type { PageNavItem } from '@theorchard/suite-frontend';
import type { OwnershipNrSoundRecording as SongMetadata } from 'src/data/queries/getOwnershipNrSoundRecording/__generated__/OwnershipNrSoundRecording';

export interface Props {
    song: NonNullable<SongMetadata['ownershipNrSoundRecording']>;
    pages?: PageNavItem[];
}

export const CLASSNAME = 'SongPageHeader';

const SongPageHeader: FC<Props> = ({ song, pages }) => {
    const instancesTabLabel = $t('ownershipRights.songPageHeader.instances');
    const rightsTabLabel = $t('ownershipRights.songPageHeader.rights');
    const deliveryTabLabel = $t('ownershipRights.songPageHeader.delivery');
    const navPages =
        pages ||
        filterData([
            { key: 'instances', label: instancesTabLabel },
            { key: 'rights', label: rightsTabLabel },
            { key: 'delivery', label: deliveryTabLabel },
        ]);

    return (
        <Page.Header className={CLASSNAME}>
            <DataList>
                <DataList.Item
                    label={$t('ownershipRights.songPageHeader.srId')}
                    value={song.id}
                />
            </DataList>
            <Page.Row>
                <Page.Title
                    title={
                        formatNameVersion(song.recordingTitle, song.version) ??
                        EMPTY_CHAR
                    }
                    type={$t(
                        'ownershipRights.songPageHeader.ownershipSoundRecording'
                    )}
                    subtitle={
                        <span className="PageTitle-subtitle">
                            {song.primaryArtists.map(p => p.name).join(', ')}
                        </span>
                    }
                />
            </Page.Row>
            <div role="tablist" tabIndex={0}>
                <Page.Nav
                    route={ROUTE_SONG}
                    params={{ id: song.id }}
                    items={navPages}
                />
            </div>
        </Page.Header>
    );
};

export default SongPageHeader;