import React, { useState } from 'react';
import { useUpdateStatementPeriodPaymentEntity } from 'src/apollo/mutations/statement-periods';
import { PopupModal } from 'src/components/shared/popup-modal';
import { PaymentEntityItem } from './payment-entity-item';
import type { GetStatementPeriodQuery } from 'src/apollo/queries/statement-periods/__generated__/statement-period';

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

export interface ShowCustomerAccountingPropTypes {
    statementPeriod?: AbacusStatementPeriod | null;
}

export const ShowCustomerAccounting: React.FC<
    ShowCustomerAccountingPropTypes
> = ({ statementPeriod }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [actionPaymentEntityId, setActionPaymentEntityId] = useState<
        number | null
    >(null);

    const setPaymentEntityToVisible = useUpdateStatementPeriodPaymentEntity();

    const statementPeriodPaymentEntities = statementPeriod?.paymentEntities;

    const handleModalSave = () => {
        if (!statementPeriod) return;
        const variables = {
            statementPeriodId: statementPeriod?.statementPeriodId,
            paymentEntityId: String(actionPaymentEntityId)!,
        };

        setPaymentEntityToVisible({ variables }).then(() => {
            setActionPaymentEntityId(null);
            setIsModalOpen(false);
        });
    };

    const modalContent = (
        <div
            className="ShowCustomerAccounting-modal"
            data-testid="ShowCustomerAccountingModalTestid"
        >
            <p>Are you sure?</p>

            <p>
                You will be showing all activity for this statement period for
                the accounts paid by the selected entity, ie. the period will be
                live.
            </p>

            <p className="bold">You cannot undo this action!</p>
        </div>
    );

    const renderPeriodPaymentEntities = () => {
        if (!statementPeriod) return null;

        return (
            <div className="ShowCustomerAccounting-entities">
                {statementPeriodPaymentEntities?.map(paymentEntity => (
                    <PaymentEntityItem
                        key={
                            paymentEntity.referencePaymentEntity
                                .referencePaymentEntityId
                        }
                        paymentEntity={paymentEntity}
                        statementPeriod={statementPeriod}
                    />
                ))}
            </div>
        );
    };

    return (
        <div className="ShowCustomerAccounting-Redesign">
            <h2 className="title">Paid By Status & Action</h2>
            {renderPeriodPaymentEntities()}

            {isModalOpen && (
                <PopupModal
                    className="ShowCustomerAccounting-popup"
                    closeHandler={() => {
                        setActionPaymentEntityId(null);
                        setIsModalOpen(false);
                    }}
                    closeButtonText="Cancel"
                    saveHandler={handleModalSave}
                    saveButtonText="Yes, Show"
                    modalContent={modalContent}
                    isOpen={isModalOpen}
                    headerLabel="WARNING"
                />
            )}
        </div>
    );
};

export default ShowCustomerAccounting;