import React from 'react';
import {
    Alert,
    Button,
    Container,
    FullscreenModal,
    LoadingSpinner,
    Section,
} from '@theorchard/suite-components';
import { get } from 'lodash-es';
import { useHistory, useParams } from 'react-router-dom';
import { useAccountPayeeBankDetailsQuery } from 'src/apollo/queries/account-payee-bank-details';
import { useAccountPayeeTaxFormInfoQuery } from 'src/apollo/queries/account-payee-tax-form-info';
import { selectPaymentInfoTabRoute } from 'src/urls/frontend-royalties';
import { getActionStateByEventName } from 'src/utils/actionStates';
import { PaymentDetailsBody } from './components/payment-details-body';
import { PaymentDetailsHeader } from './components/payment-details-header';
import {
    ABACUS_ACTION_STATUSES,
    ABACUS_ACTIONS,
} from '@theorchard/accounting-apps-shared';

export const PaymentDetailsReview = () => {
    const { accountId } = useParams<{ accountId: string }>();
    const history = useHistory();
    const {
        data: accountBankDetails,
        loading: accountPayeeBankDetailsQueryLoading,
    } = useAccountPayeeBankDetailsQuery(accountId);
    const accountDetails = accountBankDetails?.abacusAccount;
    const bankDetails = accountDetails?.accountPayee?.bankDetails;
    const {
        data: accountPayeeTaxFormInfoData,
        loading: accountPayeeTaxFormInfoQueryLoading,
    } = useAccountPayeeTaxFormInfoQuery(accountId);

    const taxName = get(
        accountPayeeTaxFormInfoData,
        'abacusAccount.accountPayee.accountPayeeTaxFormInfo.taxName'
    );

    const bankFieldDetails = bankDetails?.payoutMethod.bankFieldDetails || [];

    const accountName = bankFieldDetails.find(
        ({ name }) => name === 'AccountName'
    )?.value;

    const paymentEligibility = getActionStateByEventName(
        ABACUS_ACTIONS.PAYMENT_ELIGIBILITY,
        accountDetails?.accountPayee?.actionStates
    );

    const bankingDetailsReview = getActionStateByEventName(
        ABACUS_ACTIONS.BANKING_DETAILS_REVIEW,
        accountDetails?.accountPayee?.actionStates
    );

    const paymentEligibilityStateId = paymentEligibility?.abacusStateId;

    const loading =
        accountPayeeBankDetailsQueryLoading ||
        accountPayeeTaxFormInfoQueryLoading;

    let disabledAlertText: string | null = null;

    if (
        bankingDetailsReview?.actionStatus !== ABACUS_ACTION_STATUSES.APPROVED
    ) {
        disabledAlertText = 'Banking Details Review is not "approved" yet';
    } else if (
        paymentEligibility?.actionStatus === ABACUS_ACTION_STATUSES.APPROVED
    ) {
        disabledAlertText = 'Payment eligibility is already "approved"';
    } else if (
        paymentEligibility?.actionStatus === ABACUS_ACTION_STATUSES.REJECTED
    ) {
        disabledAlertText = 'Payment eligibility is already "rejected"';
    }

    const renderBodyContent = () => {
        if (loading) {
            return (
                <div className="d-flex justify-content-center">
                    <LoadingSpinner show size={48} />
                </div>
            );
        }

        if (disabledAlertText) {
            return <Alert variant="error" text={disabledAlertText} />;
        }

        if (accountDetails) {
            return (
                <Section>
                    <PaymentDetailsHeader
                        accountDetails={accountDetails}
                        paymentEligibilityStateId={paymentEligibilityStateId}
                    />
                    <PaymentDetailsBody
                        accountName={accountName}
                        accountDetails={accountDetails}
                        taxName={taxName}
                    />
                </Section>
            );
        }

        return null;
    };

    return (
        <FullscreenModal>
            <FullscreenModal.Header>
                <Button
                    onClick={() =>
                        history.push(selectPaymentInfoTabRoute(accountId))
                    }
                >
                    Cancel
                </Button>
            </FullscreenModal.Header>
            <FullscreenModal.Body>
                <Container>{renderBodyContent()}</Container>
            </FullscreenModal.Body>
        </FullscreenModal>
    );
};