import React from 'react';
import {
    ErrorMessage,
    InfoMessage,
    LoadingIndicator,
} from '@theorchard/suite-components';
import { NotFoundPage } from '@theorchard/suite-frontend';
import { Page } from '@theorchard/suite-frontend';
import { ROUTE_SONG } from 'src/constants';
import { useGetOwnershipNrSoundRecordingQuery } from 'src/data/queries';
import DeliveryPage from 'src/pages/songPage/pages/delivery';
import { useRouteParams } from 'src/utils/route';
import PageHeader from './components/songPageHeader';
import InstancesPage from './pages/instances';
import RightsPage from './pages/rights';
import type { SongRouteParams } from './types';

export const CLASSNAME = 'SongPage';
const INSTANCES_TAB = 'instances';
const RIGHTS_TAB = 'rights';
const DELIVERY_TAB = 'delivery';

const SongPage = () => {
    const [params] = useRouteParams<SongRouteParams>(ROUTE_SONG);
    const tabs = {
        [INSTANCES_TAB]: InstancesPage,
        [RIGHTS_TAB]: RightsPage,
        [DELIVERY_TAB]: DeliveryPage,
    };
    const notFoundErrorMessage = `Failed to look up value for key "${params.id}"`;

    const {
        data: song,
        loading,
        error,
    } = useGetOwnershipNrSoundRecordingQuery({ id: params.id });

    if (error && error?.message === notFoundErrorMessage) {
        return <NotFoundPage />;
    } else if (error) return <ErrorMessage error={error} />;

    if (loading && !song) return <LoadingIndicator />;

    if (!song)
        return (
            <InfoMessage message={$t('ownershipRights.songPage.songUnknown')} />
        );

    return (
        <Page className={CLASSNAME}>
            <PageHeader song={song} />
            <Page.Body
                currentView={params.tab}
                props={{
                    song,
                    loading,
                }}
                views={tabs}
            />
        </Page>
    );
};

export default SongPage;