import React, { useEffect, useState } from 'react';
import { formatMessage } from '@theorchard/suite-frontend';
import BulkSessionsCard from 'src/components/bulkSessionsCard';
import { IconType } from 'src/components/bulkSessionsCard/types';
import { useGetBulkAssetReportQuery } from 'src/data/queries/getBulkAssetReport';
import type { Product } from '../bulkSessionsSidecar/types';

interface ProductCreationInProgressCardProps {
    sessionId: string;
    totalProducts: number;
    assetsRequired: boolean;
    createdAt: string;
    fileName: string;
}

const hasErrors = (product: Product) =>
    product.artwork.errors || product.tracks.some(track => track.errors);

const ProductCreationInProgressCard = ({
    sessionId,
    totalProducts,
    assetsRequired,
    createdAt,
    fileName,
}: ProductCreationInProgressCardProps) => {
    const [completeProducts, setCompleteProducts] = useState<number>(0);
    const getBulkAssetReport = useGetBulkAssetReportQuery();

    useEffect(() => {
        if (sessionId && assetsRequired) {
            getBulkAssetReport(sessionId)
                .then(assetData => {
                    if (assetData) {
                        let numCompleteProducts = 0;
                        assetData.products.forEach((product: Product) => {
                            if (!hasErrors(product)) numCompleteProducts++;
                        });
                        setCompleteProducts(numCompleteProducts);
                    }
                })
                .catch(() => null);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [sessionId, assetsRequired]);

    const count = assetsRequired ? completeProducts : totalProducts;

    return (
        <BulkSessionsCard
            titleText={formatMessage(
                'bulkDigitalAudioSidecar.productCreationInProgressCard.title',
                { count }
            )}
            bodyText={$t(
                'bulkDigitalAudioSidecar.productCreationInProgressCard.body'
            )}
            iconType={IconType.Loading}
            createdAt={createdAt}
            fileName={fileName}
        />
    );
};

export default ProductCreationInProgressCard;