import React, { useState } from 'react';
import {
    LoadingIndicator,
    InfoMessage,
    Alert,
    Tag,
    Pill,
} from '@theorchard/suite-components';
import { PageHeader } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { BrandIcon } from '@theorchard/suite-icons';
import { useParams } from 'react-router-dom';
import { ORCHARD_BRAND_NAME, THE_ORCHARD_BRAND_NAME } from 'src/constants';
import {
    useTrackQuery,
    useTerritoriesQuery,
    useAudioAttributesQuery,
    useRightsAttributesQuery,
    useOrchardSoundRecordingsQuery,
    type RightsAttribute,
} from 'src/data/queries';
import RightsView from './views/rightsView/rightsView';
import RulesView from './views/rulesView/rulesView';
import type { AudioAttributesForTrack } from 'src/data/queries/audioAttributes/__generated__/AudioAttributesForTrack';
import type { OrchardSoundRecordingsByTuids } from 'src/data/queries/orchardSoundRecordings/__generated__/OrchardSoundRecordingsByTuids';
import type { TerritoriesForTrackRules } from 'src/data/queries/territories/__generated__/TerritoriesForTrackRules';
import type { TrackMetadata } from 'src/data/queries/track/selector';

export const CLASS_NAME = 'TrackPage';

interface ParamTypes {
    productId: string;
    trackId: string;
}

export interface TerritoryFilter {
    value: string;
}

export interface ServiceFilter {
    value: string;
    label: string;
}

export interface PolicyFilter {
    value: string;
    label: string;
}

const TrackPage = () => {
    const { trackId } = useParams<ParamTypes>();
    const [reloading, setReloading] = useState(false);

    const trackResult = useTrackQuery(String(trackId), reloading);
    const territoriesResult = useTerritoriesQuery();
    const audioAttrResult = useAudioAttributesQuery();
    const rightsAttrResult = useRightsAttributesQuery();
    const osrResult = useOrchardSoundRecordingsQuery(String(trackId));

    const loading =
        trackResult.loading ||
        territoriesResult.loading ||
        audioAttrResult.loading ||
        rightsAttrResult.loading ||
        osrResult.loading;

    const error =
        trackResult.error ||
        territoriesResult.error ||
        audioAttrResult.error ||
        rightsAttrResult.error ||
        osrResult.error;

    if (error) return <Alert variant="error" text={error.message} />;
    if (
        (loading && !trackResult.data) ||
        (loading && !territoriesResult.data) ||
        (loading && !audioAttrResult.data) ||
        (loading && !rightsAttrResult.data) ||
        (loading && !osrResult.data) ||
        reloading
    )
        return <LoadingIndicator />;

    if (
        !trackResult.data ||
        !territoriesResult.data ||
        !audioAttrResult.data ||
        !rightsAttrResult.data ||
        !osrResult.data
    )
        return (
            <InfoMessage
                message={$t(`digitalProducts.trackPage.error.missingData`)}
            />
        );

    const handleReload = (shouldReload: boolean) => {
        setReloading(shouldReload);
    };
    trackResult.data.handleReload = handleReload;

    const items = [
        {
            label: $t(`digitalProducts.trackPage.views.rightsName`),
            key: 'rights',
        },
        {
            label: $t(`digitalProducts.trackPage.views.deliveryName`),
            key: 'delivery',
        },
    ];
    const views = {
        rights: RightsView,
        delivery: RulesView,
    };

    const renderHeader = (data: TrackMetadata) => {
        const { track } = data;
        if (track) {
            const brand =
                !track.brandName || track.brandName === THE_ORCHARD_BRAND_NAME
                    ? ORCHARD_BRAND_NAME
                    : track.brandName;

            const renderPopover = () => {
                return (
                    <div className={`${CLASS_NAME}-account-pill-popover`}>
                        <h4
                            className={`${CLASS_NAME}-account-pill-popover-title`}
                        >
                            <BrandIcon brand={brand} size="16" />
                            {`${track.subAccountName || track.accountName} · ${
                                track.subAccountId || track.accountId
                            }`}
                        </h4>
                        <div
                            className={`${CLASS_NAME}-account-pill-popover-subtitle`}
                        >
                            {track.accountType === 'Vendor'
                                ? 'Account'
                                : `Subaccount of ${track.accountName} · ${track.accountId}`}
                        </div>
                    </div>
                );
            };

            const featuringArtists = track.featuringArtists.length
                ? track.featuringArtists.join(', ')
                : '';
            return (
                <PageHeader>
                    <PageHeader.Row>
                        <PageHeader.Secondary>
                            <Pill
                                testId="accountPillId"
                                brand={brand}
                                popoverOptions={{
                                    id: 'accountPopover',
                                    content: renderPopover(),
                                }}
                                text={`${
                                    track.subAccountName || track.accountName
                                }`}
                            />
                            <div className={`${CLASS_NAME}-header-first-line`}>
                                <div
                                    className={`${CLASS_NAME}-header-first-line-text`}
                                >
                                    {$t(
                                        `digitalProducts.trackPage.header.firstLine.isrc`
                                    )}
                                </div>
                                <div
                                    className={`${CLASS_NAME}-header-first-line-data`}
                                >
                                    {track.isrc}
                                </div>
                                <div className={`${CLASS_NAME}-header-divider`}>
                                    |
                                </div>
                                <div
                                    className={`${CLASS_NAME}-header-first-line-text ${CLASS_NAME}-header-first-line-isrc`}
                                >
                                    {$t(
                                        `digitalProducts.trackPage.header.firstLine.trackId`
                                    )}
                                </div>
                                <div
                                    className={`${CLASS_NAME}-header-first-line-data`}
                                >
                                    {track.tuid}
                                </div>
                            </div>
                        </PageHeader.Secondary>
                    </PageHeader.Row>
                    <PageHeader.Row>
                        <PageHeader.Primary>
                            <div>
                                <Tag text="Track" variant="category" />
                                <PageHeader.PrimaryTitle>
                                    <div
                                        className={`${CLASS_NAME}-header-track-name`}
                                    >
                                        <h2>{track.name}</h2>
                                    </div>
                                </PageHeader.PrimaryTitle>
                                <PageHeader.PrimarySubtitle>
                                    <div
                                        className={`${CLASS_NAME}-header-artists-line`}
                                    >
                                        <div
                                            className={`${CLASS_NAME}-header-artists-line-data`}
                                        >
                                            {track.primaryArtists.join(', ')}
                                        </div>
                                        {featuringArtists && (
                                            <div
                                                className={`${CLASS_NAME}-header-artists-line-featuring`}
                                            >
                                                <div
                                                    className={`${CLASS_NAME}-header-divider`}
                                                >
                                                    |
                                                </div>
                                                <div
                                                    className={`${CLASS_NAME}-header-artists-line-data ${CLASS_NAME}-header-artists-line-featuring-data`}
                                                >
                                                    {featuringArtists}
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                </PageHeader.PrimarySubtitle>
                            </div>
                        </PageHeader.Primary>
                    </PageHeader.Row>
                </PageHeader>
            );
        }
    };

    const renderNav = (data: TrackMetadata) => {
        const { track } = data;
        if (track) return <Page.Nav items={items} />;
    };

    const renderTrackPageBody = (
        trackData: TrackMetadata,
        territoriesData: TerritoriesForTrackRules,
        audioAttrData: AudioAttributesForTrack,
        rightsAttributes: RightsAttribute[],
        osrData: OrchardSoundRecordingsByTuids,
        views: Record<string, React.ElementType>
    ) => {
        const { track, handleReload } = trackData;
        const { territories } = territoriesData;
        const { audioAttributes } = audioAttrData;
        const { orchardSoundRecordings } = osrData;

        if (!track && !territories) return <div />;

        return (
            <Page.Body
                views={views}
                props={{
                    track,
                    handleReload,
                    territories,
                    audioAttributes,
                    rightsAttributes,
                    orchardSoundRecordings,
                }}
            />
        );
    };

    return (
        <Page className={CLASS_NAME}>
            {renderHeader(trackResult.data)}
            {renderNav(trackResult.data)}
            {renderTrackPageBody(
                trackResult.data,
                territoriesResult.data,
                audioAttrResult.data,
                rightsAttrResult.data,
                osrResult.data,
                views
            )}
        </Page>
    );
};

export default TrackPage;