import type { FC } from 'react';
import React from 'react';
import {
    Button,
    LoadingSpinner,
    Tag,
    Tooltip,
} from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { countBy } from 'lodash-es';
import { INVOICE_STATUS } from 'src/enum';
import type { GetVatInvoicesQuery } from 'src/apollo/queries/statement-periods/__generated__/get-vat-invoices';

type StatementInvoices = NonNullable<
    GetVatInvoicesQuery['moneyhubStatementInvoices']
>[0];

const CLASS_NAME = 'VatDocsStatuses';

export const TERM_COMPLETED_VAT_DOCUMENTS = 'Completed VAT Documents';
export const TERM_FAILED_VAT_DOCUMENTS = 'Failed VAT Documents';
export const TERM_RETRY_FAILED_VAT_DOCUMENTS = 'Retrying Failed VAT Documents';
export const TERM_RETRY_GENERATION_FAILED =
    'Retrying the generation of failed VAT documents failed. Please try again or contact support.';

interface Props {
    hasRetryGenerationError: boolean;
    invoices: StatementInvoices[];
    toggleFailedDocsModal: () => void;
    isRetrying: boolean;
}

const VatDocsStatuses: FC<Props> = ({
    hasRetryGenerationError,
    invoices,
    toggleFailedDocsModal,
    isRetrying,
}) => {
    const statusDictionary = countBy(invoices, 'statementAttachmentStatus');
    const completedInvoicesCount =
        statusDictionary[INVOICE_STATUS.COMPLETED] ?? 0;
    const failedInvoicesCount = statusDictionary[INVOICE_STATUS.ERROR] ?? 0;
    const retryInvoicesCount = statusDictionary[INVOICE_STATUS.RETRY] ?? 0;

    const completed = completedInvoicesCount > 0 && (
        <span data-testid="vat-completed-status">
            <Tag
                text={completedInvoicesCount.toString()}
                className={`${CLASS_NAME}-status-count completed`}
            />
            <span>{TERM_COMPLETED_VAT_DOCUMENTS}</span>
        </span>
    );

    const failed = failedInvoicesCount > 0 &&
        retryInvoicesCount == 0 &&
        !isRetrying && (
            <span data-testid="vat-failed-status">
                <Tag
                    text={failedInvoicesCount.toString()}
                    className={`${CLASS_NAME}-status-count failed`}
                />
                <Button
                    className={`${CLASS_NAME}-failed-btn`}
                    data-testid="vat-failed-status-btn"
                    variant="quartenary"
                    onClick={toggleFailedDocsModal}
                >
                    {TERM_FAILED_VAT_DOCUMENTS}
                </Button>
                {hasRetryGenerationError && (
                    <Tooltip
                        id="retry-failed-tooltip"
                        className="retry-failed-tooltip"
                        message={TERM_RETRY_GENERATION_FAILED}
                    >
                        <GlyphIcon name="warning" size={16} />
                    </Tooltip>
                )}
            </span>
        );

    const retry = (retryInvoicesCount > 0 || isRetrying) && (
        <span className={`${CLASS_NAME}-retry`} data-testid="vat-retry-status">
            <LoadingSpinner show /> {TERM_RETRY_FAILED_VAT_DOCUMENTS}
        </span>
    );

    return (
        <div className={`${CLASS_NAME}`} data-testid="vat-status">
            {completed}
            {failed}
            {retry}
        </div>
    );
};

export default VatDocsStatuses;