import React, { useEffect, useState } from 'react';
import { isEmpty } from 'lodash-es';
import { useContractTermAttachments } from 'src/apollo/queries/contract-term';
import { TrackResult, Track } from 'src/types/track';

export interface ContractTermTracksPropTypes {
    contractTermId: string;
    tracksIsrcs: string[] | null;
    limit: number;
}

export const useContractTermTracks = ({
    contractTermId,
    tracksIsrcs,
    limit = 10,
}: ContractTermTracksPropTypes) => {
    const getContractsTermsAttachments = useContractTermAttachments();
    const [tracksData, setTracksData] = useState<any>([]);
    const [tracks, setTracks] = useState<Track[]>([]);
    const [areTracksLoaded, setAreTracksLoaded] = useState<boolean>(false);

    const [requestParams, setRequestParams] = useState({
        limit,
        offset: 0,
        totalPages: 1,
        currentPageCount: 1,
    });

    useEffect(() => {
        if (tracksIsrcs && !isEmpty(tracksIsrcs)) {
            const totalPages = Math.ceil(
                tracksIsrcs.length / requestParams.limit
            );
            setRequestParams({ ...requestParams, totalPages });
        }
    }, [tracksIsrcs]);

    useEffect(() => {
        if (contractTermId && !areTracksLoaded) {
            const fetchTracks = async () => {
                const data = await getContractsTermsAttachments(
                    contractTermId,
                    requestParams.limit,
                    requestParams.offset
                );
                setTracksData(data);
            };
            fetchTracks();
        }
    }, [contractTermId, requestParams]);

    useEffect(() => {
        if (
            !areTracksLoaded &&
            requestParams.currentPageCount <= requestParams.totalPages &&
            !isEmpty(tracksData)
        ) {
            let item: Track;
            const trackItems: Track[] = [];
            tracksData &&
                tracksData?.forEach((track: TrackResult) => {
                    if (track.tracks.totalCount > 0) {
                        item = {
                            trackName: track.tracks.tracks[0]?.trackName,
                            isrc: track.isrc,
                        };
                    } else item = { trackName: 'undefined', isrc: track.isrc };
                    trackItems.push(item);
                });
            setTracks([...tracks, ...trackItems]);
            setRequestParams({
                ...requestParams,
                currentPageCount: requestParams.currentPageCount + 1,
                offset: requestParams.offset + requestParams.limit,
            });
            if (requestParams.totalPages == requestParams.currentPageCount)
                setAreTracksLoaded(true);
        }
    }, [tracksData]);

    const renderTrackTerms = () => (
        <div className="Tracks" data-testid="tracksNamesTestId">
            {tracks?.map((track: any, index: number) => (
                <div className="Track" key={`${track.isrc}-${index}`}>
                    <span
                        className="Track-name"
                        data-testid={`trackNameTestId-${index}`}
                    >
                        {track.trackName}
                    </span>
                    {' - '}
                    <div></div>
                    <span className="Track-isrc">{track.isrc}</span>
                </div>
            ))}
        </div>
    );

    return {
        tracks,
        renderTrackTerms,
    };
};

export default useContractTermTracks;