import type { FC } from 'react';
import { useMemo } from 'react';
import React from 'react';
import {
    LoadingIndicator,
    Alert,
    CoverArt,
    Status,
    Card,
    Section,
    Tooltip,
} from '@theorchard/suite-components';
import { Segment } from '@theorchard/suite-frontend';
import { NA_VALUE, OSR_CATEGORY } from 'src/constants';
import { useOsrSearchByIsrcQuery } from 'src/data/queries/searchByIsrc';
import type { OrchardSoundRecordingSearchResult } from 'src/data/queries/searchByIsrc';

export const PARENT_CLASS_NAME = 'SearchPage';
export const CLASS_NAME = `SearchPage-Views-OsrView`;

interface OsrParsedData extends OrchardSoundRecordingSearchResult {
    parsedArtists: string;
}

export interface Props {
    term: string;
    showOnlyActiveContent: boolean;
}

const formatArtists = (osr: OrchardSoundRecordingSearchResult) => {
    const primary = osr.primaryArtists ? osr.primaryArtists.join(', ') : '';
    const featuring = osr.featuringArtists
        ? osr.featuringArtists.join(', ')
        : '';

    if (primary && featuring) return `${primary}, ${featuring}`;
    if (primary) return primary;
    if (featuring) return featuring;

    return null;
};

const isTextAvailable = (data?: string | null) => {
    if (!data) return NA_VALUE;

    return data;
};

const formatUrl = (id: string) => `/catalog/orchard-sound-recordings/${id}`;

const extractDefaultValue = (data: OrchardSoundRecordingSearchResult[]) => {
    let defaultName = NA_VALUE;
    let defaultArtists: string | null = null;
    let defaultImageUrl: string | null = null;

    for (let i = 0; i < data.length; i++) {
        const availableName = isTextAvailable(data[i].name);
        defaultName = availableName !== NA_VALUE ? availableName : defaultName;
        defaultArtists = formatArtists(data[i]) || defaultArtists;
        defaultImageUrl = data[i].refTrackImageUrl || defaultImageUrl;

        if (defaultName !== NA_VALUE && defaultArtists && defaultImageUrl) {
            break;
        }
    }

    return {
        defaultName,
        defaultArtists,
        defaultImageUrl,
    };
};

const OsrView: FC<Props> = ({ term, showOnlyActiveContent }) => {
    const { data, loading, error } = useOsrSearchByIsrcQuery({
        skip: !term,
        variables: { term },
    });

    const sortedData = useMemo(() => {
        if (!data) return [];
        return data.slice().sort((o1, o2) => {
            if (o1.isActive && !o2.isActive) return -1;
            if (!o1.isActive && o2.isActive) return 1;
            return 0;
        });
    }, [data]);

    if (error) return <Alert variant="error" text={error.message} />;

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

    if (!data) return <div className={CLASS_NAME} />;

    if (term)
        Segment.trackEvent('Search', { category: OSR_CATEGORY }, term).catch(
            e => console.log(e)
        );

    const { defaultName, defaultArtists, defaultImageUrl } =
        extractDefaultValue(sortedData);
    const preparedData: OsrParsedData[] = sortedData
        .filter((osr: OrchardSoundRecordingSearchResult) => {
            return !showOnlyActiveContent || osr.isActive;
        })
        .map((osr: OrchardSoundRecordingSearchResult) => ({
            ...osr,
            parsedArtists: formatArtists(osr) || defaultArtists || '',
        }));

    if (!preparedData.length) {
        return <></>;
    }

    return (
        <Section className={CLASS_NAME}>
            <Section.Header
                level="third"
                className={`${CLASS_NAME}-title`}
                title={$t(`orchardSoundRecordings.osrView.title.osr`)}
            />
            <Section.Body>
                {preparedData.map((osr: OsrParsedData) => (
                    <Card
                        key={osr.id}
                        href={formatUrl(osr.id)}
                        suite
                        layout="horizontal"
                        className={`${CLASS_NAME}-card`}
                    >
                        {/*In our case, when we're loading image urls asynchronously,*/}
                        {/*CoverArt component should be rendered exactly this way:*/}
                        {/*TWO SEPARATE COMPONENTS for each state — empty and loaded. This is caused by bug*/}
                        {/*in the CoverArt component itself (see the discussion https://orcd.slack.com/archives/C02JF24TGE6/p1742559955099149)*/}
                        {/*and also ternary operator is not working here, because of the React reconciliation optimisation process*/}
                        {osr.refTrackImageUrl && (
                            <CoverArt width="80" url={osr.refTrackImageUrl} />
                        )}
                        {/*fallback for the inactive tracks — we're taking an image from the active ones*/}
                        {!osr.refTrackImageUrl && defaultImageUrl && (
                            <CoverArt width="80" url={defaultImageUrl} />
                        )}
                        {!osr.refTrackImageUrl && !defaultImageUrl && (
                            <CoverArt width="80" />
                        )}
                        <Card.Body>
                            <div className={`${CLASS_NAME}-metadata-left`}>
                                <Card.Title>
                                    {osr.name || defaultName}
                                </Card.Title>
                                {osr.parsedArtists &&
                                    (osr.parsedArtists.split(',').length > 4 ? (
                                        <Tooltip
                                            id="artists-tooltip"
                                            className={`${CLASS_NAME}-artists-tooltip`}
                                            message={osr.parsedArtists}
                                        >
                                            <Card.Text
                                                className={`${CLASS_NAME}-artists`}
                                            >
                                                {osr.parsedArtists}
                                            </Card.Text>
                                        </Tooltip>
                                    ) : (
                                        <Card.Text
                                            className={`${CLASS_NAME}-artists`}
                                        >
                                            {osr.parsedArtists}
                                        </Card.Text>
                                    ))}
                                <Card.Text className={`${CLASS_NAME}-isrc`}>
                                    {osr.isrc}
                                </Card.Text>
                            </div>
                            {!osr.isActive && (
                                <div className={`${CLASS_NAME}-metadata-right`}>
                                    <Status
                                        text="Inactive"
                                        filled
                                        variant="error"
                                    />
                                </div>
                            )}
                        </Card.Body>
                    </Card>
                ))}
            </Section.Body>
        </Section>
    );
};

export default OsrView;