import React from 'react';
import { formatMessage } from '@orchard/frontend-localization';
import { WarningGlyph, RefreshGlyph, CheckmarkGlyph, Help } from '@orchard/frontend-react-components';
import Currency from 'src/components/currency/currency';
import {
    Collaborators_collaborators_collaborators_reports,
} from 'src/pages/index-page/queries/__definitions__/Collaborators';
import DownloadReportButton from './download-report-button/download-report-button';
import {
    REPORT_STATUS_GENERATED,
    REPORT_STATUS_PENDING,
    REPORT_STATUS_REQUESTED,
    REPORT_STATUS_UNLOADED,
    REPORT_STATUS_ERROR,
} from '../../constants';
import messages from './i18n';

const CLASS_NAME = 'ReportCells';

type Props = {
    report: Omit<Collaborators_collaborators_collaborators_reports, 'fileLocation'> ;
    trackingCategory: string;
    tdClass?: string;
    showReportValue?: boolean;
    renderCollaboratorPageContent?: boolean;
};

const ReportCells: React.FC<Props> = ({
    report,
    trackingCategory,
    tdClass = '',
    showReportValue = true,
    renderCollaboratorPageContent = false,
}) => {
    let reportCell;
    let valueCell = <>-</>;

    if (renderCollaboratorPageContent)
        switch (report && report.status) {
            case REPORT_STATUS_REQUESTED:
            case REPORT_STATUS_PENDING:
            case REPORT_STATUS_UNLOADED:
                reportCell = (
                    <div className={ `${CLASS_NAME}-report ${CLASS_NAME}-report-in-progress` }>
                        <RefreshGlyph />
                        { report.reportRunName }
                    </div>
                );
                break;
            case REPORT_STATUS_GENERATED:
                reportCell = (
                    <div className={ `${CLASS_NAME}-report ${CLASS_NAME}-report-generated` }>
                        { report?.transactionId && (
                            <Help
                                id={ `${CLASS_NAME}-report-tooltip-${report.id}` }
                                message={ formatMessage(messages.addedToRoyalties) }
                            >
                                <div className={ `${CLASS_NAME}-report-generated-icon` }>
                                    <CheckmarkGlyph />
                                </div>
                            </Help>
                        ) }
                        { report.reportRunName }
                    </div>
                );
                break;
            case REPORT_STATUS_ERROR:
                reportCell = (
                    <div className={ `${CLASS_NAME}-report` }>
                        <WarningGlyph />
                        { report.reportRunName }
                    </div>
                );
                break;
            default:
                reportCell = formatMessage(messages.noReports);
        }
    else
        switch (report && report.status) {
            case REPORT_STATUS_REQUESTED:
            case REPORT_STATUS_PENDING:
            case REPORT_STATUS_UNLOADED:
                reportCell = (
                    <div className={ `${CLASS_NAME}-report ${CLASS_NAME}-report-in-progress` }>
                        <RefreshGlyph />
                        { report.reportRunName }
                    </div>
                );
                break;
            case REPORT_STATUS_GENERATED: {
                reportCell = (
                    <div className={ `${CLASS_NAME}-report-generated` }>
                        { report?.transactionId && (
                            <Help
                                id={ `${CLASS_NAME}-report-tooltip-${report.id}` }
                                message={ formatMessage(messages.addedToRoyalties) }
                            >
                                <div className={ `${CLASS_NAME}-report-generated-icon` }>
                                    <CheckmarkGlyph />
                                </div>
                            </Help>
                        ) }
                        <span>{ report.reportRunName } </span>
                        <span className={ `${CLASS_NAME}-bull` }>•</span>
                        <Currency
                            codeClassName={ `${CLASS_NAME}-currency-code` }
                            amount={ report.amount }
                            code={ report.currency }
                            renderSpace
                        />
                        <Help
                            id={ `${CLASS_NAME}-report-download-tooltip-${report.id}` }
                            message={ formatMessage(messages.download) }
                            hideOnHover={ false }
                        >
                            <DownloadReportButton
                                reportId={ report.id }
                                reportStatus={ report.status }
                                trackingCategory={ trackingCategory }
                                fileFormat={ report.fileFormat || '' }
                                variant="hover"
                            />
                        </Help>
                    </div>
                );
                valueCell = <Currency amount={ report.amount } code={ report.currency } renderSpace />;
                break;
            }
            case REPORT_STATUS_ERROR:
                reportCell = (
                    <div className={ `${CLASS_NAME}-report` }>
                        <WarningGlyph />
                        { report.reportRunName }
                    </div>
                );
                break;
            default:
                reportCell = (
                    <div className={ `${CLASS_NAME}-report` }>-</div>
                );
        }

    return (
        <>
            <td className={ tdClass }>{ reportCell }</td>
            { showReportValue && <td className={ tdClass }>{ valueCell }</td> }
        </>
    );
};

export default ReportCells;