import React from 'react';
import { Card } from '@theorchard/suite-components';
import { BULK_CREATION_STEPS } from 'src/constants';

const Step3Description = ({
    activeStep,
    skipConnectAssets,
    numCompleteProducts,
    numTotalProducts,
}: {
    activeStep: BULK_CREATION_STEPS;
    skipConnectAssets: boolean;
    numCompleteProducts: number;
    numTotalProducts: number;
}) => {
    if (activeStep === BULK_CREATION_STEPS.CONFIRM)
        return (
            <div className="bulk-upload-sidebar-step-body">
                <div className="bulk-upload-sidebar-step-inline">
                    <div className="highlight success">
                        {skipConnectAssets
                            ? numTotalProducts
                            : numCompleteProducts}
                    </div>
                    <Card.Text>
                        {skipConnectAssets
                            ? $t(
                                  'bulkDigitalAudio.step3Description.noAssetsText'
                              )
                            : $t(
                                  'bulkDigitalAudio.step3Description.validAssetsText'
                              )}
                    </Card.Text>
                </div>
                {!skipConnectAssets &&
                    numCompleteProducts < numTotalProducts && (
                        <div className="bulk-upload-sidebar-step-inline">
                            <div className="highlight failure">
                                {numTotalProducts - numCompleteProducts}
                            </div>
                            <Card.Text>
                                {$t(
                                    'bulkDigitalAudio.step3Description.failedAssetsText'
                                )}
                            </Card.Text>
                        </div>
                    )}
            </div>
        );
    else return null;
};

export default Step3Description;