import type { FC } from 'react';
import React, { useState } from 'react';
import {
    Alert,
    Button,
    Modal,
    LoadingSpinner,
} from '@theorchard/suite-components';
import type { GetStatementPeriodQuery } from 'src/apollo/queries/statement-periods/__generated__/statement-period';

type AbacusStatementPeriod = NonNullable<
    GetStatementPeriodQuery['abacusStatementPeriod']
>;
type AbacusStatementPaymentEntities = NonNullable<
    AbacusStatementPeriod['paymentEntities']
>;

type ReferencePaymentEntity = NonNullable<
    AbacusStatementPaymentEntities[0]['referencePaymentEntity']
>;

const CLASS_NAME = 'GenerateVatDocs';

export const TERM_GENERATE_DOCS_BUTTON = 'Generate VAT Documents';
export const TERM_GENERATING_VAT_DOCUMENTS = 'Generating VAT Documents';
export const TERM_MODAL_ALERT_TITLE = 'This action cannot be undone!';
export const TERM_MODAL_ALERT_TEXT =
    'You should only generate VAT documents when ALL accounting activity is completed for this group of accounts. Please ensure you have completed all accounting activity before confirming this action.';
export const TERM_MODAL_TITLE =
    'Are you sure you want to generate VAT documents?';
export const TERM_MODAL_CONFIRM = 'Yes, generate';
const TERM_MODAL_CANCEL = 'No, cancel';
const TERM_MODAL_TEXT_PART_1 = 'You are about to generate VAT documents for';
const TERM_MODAL_TEXT_PART_2 = 'for all accounts paid by';

export const TESTID_MODAL_TEXT = 'generation-modal-text';

export interface Props {
    paymentEntity: ReferencePaymentEntity;
    statementPeriod: AbacusStatementPeriod;
    onGenerateVatDocs: () => void;
    hasVatData: boolean;
    hasInProgressInvoices: boolean;
    isGenerating: boolean;
}

const GenerateVatDocs: FC<Props> = ({
    paymentEntity,
    statementPeriod,
    onGenerateVatDocs,
    hasVatData,
    hasInProgressInvoices,
    isGenerating,
}) => {
    const [isConfirmationModalOpen, setIsConfirmationModalOpen] =
        useState(false);

    const toggleConfirmationModal = () => {
        setIsConfirmationModalOpen(!isConfirmationModalOpen);
    };

    const handleConfirmClick = () => {
        onGenerateVatDocs();
        toggleConfirmationModal();
    };

    const renderGeneratingVatInvoices = () => (
        <span className={`${CLASS_NAME}-generating`}>
            <LoadingSpinner show /> {TERM_GENERATING_VAT_DOCUMENTS}{' '}
        </span>
    );

    const getPaymentEntityName = (paymentEntity: ReferencePaymentEntity) => {
        if ('paymentEntityName' in paymentEntity)
            return paymentEntity?.paymentEntityName;

        return null;
    };

    return (
        <div className={CLASS_NAME}>
            <Button
                variant="secondary"
                disabled={!hasVatData || hasInProgressInvoices || isGenerating}
                className={`${CLASS_NAME}-generate-button`}
                onClick={toggleConfirmationModal}
                data-testid="generate-button"
            >
                {hasInProgressInvoices || isGenerating
                    ? renderGeneratingVatInvoices()
                    : TERM_GENERATE_DOCS_BUTTON}
            </Button>
            <Modal
                onRequestClose={toggleConfirmationModal}
                isOpen={isConfirmationModalOpen}
                title={TERM_MODAL_TITLE}
                onConfirm={handleConfirmClick}
                confirmTitle={TERM_MODAL_CONFIRM}
                cancelTitle={TERM_MODAL_CANCEL}
                className={`${CLASS_NAME}-modal`}
            >
                <span data-testid={TESTID_MODAL_TEXT}>
                    {TERM_MODAL_TEXT_PART_1}
                    <span className={`${CLASS_NAME}-modal-bold-text`}>
                        {' '}
                        {statementPeriod.statementPeriodName}{' '}
                    </span>
                    {TERM_MODAL_TEXT_PART_2}
                    <span className={`${CLASS_NAME}-modal-bold-text`}>
                        {' '}
                        {getPaymentEntityName(paymentEntity)}
                    </span>
                    .
                </span>
                <Alert
                    className={`${CLASS_NAME}-modal-alert`}
                    variant="warn"
                    title={TERM_MODAL_ALERT_TITLE}
                    text={TERM_MODAL_ALERT_TEXT}
                />
            </Modal>
        </div>
    );
};

export default GenerateVatDocs;