import type { FC } from 'react';
import React from 'react';
import { Button } from '@theorchard/suite-components';
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/data/utils';
import { recordContributorsReferenceTabClick } from 'src/utils/segment/segment';
import type { PageNavItem } from '@theorchard/suite-frontend';
import type { SongMetadata } from 'src/data/queries/nrSoundRecordingById/types';

export interface Props {
    song: SongMetadata;
    pages?: PageNavItem[];
    disableButtons: boolean;
    errors: boolean;
    handleUpdateClicked: () => void;
    handleCancelClicked: () => void;
}

interface FilteredPages {
    key: string;
    label: string;
}

export const CLASSNAME = 'SongPageHeader';

const SongPageHeader: FC<Props> = ({
    song,
    pages,
    disableButtons,
    errors,
    handleUpdateClicked,
    handleCancelClicked,
}) => {
    const metadataTabLabel = $t(`neighbouringRights.songPageHeader.metadata`);
    const contributorsTabLabel = $t(
        `neighbouringRights.songPageHeader.contributors`
    );
    const deliveryTabLabel = $t(`neighbouringRights.songPageHeader.delivery`);
    const navPages: FilteredPages[] =
        (pages as FilteredPages[]) ||
        filterData([
            { key: 'reference-metadata', label: metadataTabLabel },
            { key: 'contributors', label: contributorsTabLabel },
            { key: 'delivery', label: deliveryTabLabel },
        ]);

    const handleNavUpdate = (event: React.MouseEvent<HTMLDivElement>) => {
        const { textContent } = event.target as HTMLDivElement;
        const selectedTab = navPages.find(({ label }) => label === textContent);
        recordContributorsReferenceTabClick(selectedTab?.key);
    };

    return (
        <Page.Header className={CLASSNAME}>
            <DataList>
                <DataList.Item
                    label={$t(`neighbouringRights.songPageHeader.nrId`)}
                    value={song.id}
                />
            </DataList>
            <Page.Row>
                <Page.Title
                    title={
                        formatNameVersion(song.recordingTitle, song.version) ??
                        EMPTY_CHAR
                    }
                    type={$t(
                        `neighbouringRights.songPageHeader.neighbouringRights`
                    )}
                    subtitle={
                        <span className="PageTitle-subtitle">
                            {song.mainArtist}
                        </span>
                    }
                />
                <div className={`${CLASSNAME}-buttons`}>
                    <Button
                        type="clear"
                        onClick={() => handleCancelClicked()}
                        disabled={disableButtons}
                    >
                        {$t(`neighbouringRights.songPageHeader.cancel`)}
                    </Button>
                    <Button
                        className="UpdateButton"
                        variant="primary"
                        type="submit"
                        onClick={handleUpdateClicked}
                        disabled={disableButtons || errors}
                    >
                        {$t(`neighbouringRights.songPageHeader.update`)}
                    </Button>
                </div>
            </Page.Row>
            <div
                role="tablist"
                tabIndex={0}
                onClick={handleNavUpdate}
                onKeyPress={() => {
                    return;
                }}
            >
                <Page.Nav
                    route={ROUTE_SONG}
                    params={{ nrSrId: song.id }}
                    items={navPages}
                />
            </div>
        </Page.Header>
    );
};

export default SongPageHeader;