import React from 'react';
import { LoadingIndicator } from '@theorchard/suite-components';
import { useParams } from 'react-router-dom';
import ReadError from 'src/components/errors/read-error';
import {
    useComposition,
    useGlobalSoundRecording,
    useLabelSoundRecording,
} from 'src/data/queries';
import { useCompositionLsrs } from 'src/data/queries/compositionLsrs/compositionLsrs';
import {
    gsrToAssociatedSoundRecording,
    lsrToAssociatedSoundRecording,
} from './helpers';
import NewSong from './newSong';

const NewSongGql: React.FC = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const { id } = useParams<{ id: string }>();
    const gsrId = urlParams.get('gsrId') || '';
    const lsrId = urlParams.get('lsrId') || '';
    const { data, loading, error } = useGlobalSoundRecording(gsrId);
    const {
        data: lsrData,
        loading: lsrLoading,
        error: lsrError,
    } = useLabelSoundRecording(lsrId);
    const {
        data: composition,
        loading: loadingComp,
        error: errorComp,
    } = useComposition(id || '');
    const { data: compositionLsrs, loading: loadingCompLsrs } =
        useCompositionLsrs(id || '');

    if (loading || loadingComp || lsrLoading || loadingCompLsrs)
        return <LoadingIndicator />;

    if (error || errorComp || lsrError || (id && !composition?.id))
        return <ReadError error={error || errorComp || lsrError} />;

    const compositionData = composition
        ? {
              ...composition,
              associatedLabelSoundRecordings:
                  compositionLsrs?.associatedLabelSoundRecordings || [],
          }
        : null;

    return (
        <NewSong
            associatedSoundRecording={
                (data && gsrToAssociatedSoundRecording(data)) ||
                (lsrData && lsrToAssociatedSoundRecording(lsrData)) ||
                null
            }
            composition={compositionData}
        />
    );
};

export default NewSongGql;