import React, { useEffect, useState } from 'react';
import { Button, HelpTooltip } from '@theorchard/suite-components';
import { useParams } from 'react-router-dom';
import { useCloseStatementPeriod } from 'src/apollo/mutations/statement-periods';
import {
    CLOSE_BALANCES_ACTIONS_TOOLTIP_MSG,
    CLOSE_STATEMENT_PERIOD_TOOLTIP_MSG,
} from 'src/constants';
import { ActionStatusIcon } from '../shared/action-status-icon';
import { PopupModal } from '../shared/popup-modal';
import { ABACUS_ACTION_STATUSES } from '@theorchard/accounting-apps-shared';
import { AccountingDBTModel } from 'src/apollo/definitions/globalTypes';
import { useMoneyhubDbtRefresh } from 'src/apollo/mutations/moneyhubDbtRefresh';

interface PropTypes {
    areCloseBalancesActionsComplete: boolean;
    exchangeRatesAreUploaded: boolean;
    physicalReservesAreReleased: boolean;
    adjustmentsAreApplied: boolean;
    customerAccountingActionsCompleted: boolean;
    isPeriodClosed: boolean;
    setError: (s: string) => void;
}
const MODELS_TO_REFRESH = Object.freeze([AccountingDBTModel.STATEMENTS]);

export const CloseStatementPeriodButton: React.FC<PropTypes> = ({
    areCloseBalancesActionsComplete,
    exchangeRatesAreUploaded,
    physicalReservesAreReleased,
    adjustmentsAreApplied,
    customerAccountingActionsCompleted,
    isPeriodClosed,
    setError,
}) => {
    const { statementPeriodId } = useParams<{ statementPeriodId: string }>();
    const [disabled, setDisabled] = useState(true);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalConfirmButtonDisabled, setIsModalConfirmButtonDisabled] =
        useState(false);
    const closeStatementPeriod = useCloseStatementPeriod(statementPeriodId);
    const triggerDbtRefresh = useMoneyhubDbtRefresh(
        true,
        MODELS_TO_REFRESH as AccountingDBTModel[]
    );

    useEffect(() => {
        if (isPeriodClosed || !areCloseBalancesActionsComplete) {
            setDisabled(true);
            return;
        }
        if (
            exchangeRatesAreUploaded &&
            physicalReservesAreReleased &&
            adjustmentsAreApplied &&
            customerAccountingActionsCompleted
        )
            setDisabled(false);
    }, [
        areCloseBalancesActionsComplete,
        isPeriodClosed,
        exchangeRatesAreUploaded,
        physicalReservesAreReleased,
        adjustmentsAreApplied,
        customerAccountingActionsCompleted,
    ]);

    const handleStatementPeriodClose = () => {
        setDisabled(true);
        setIsModalConfirmButtonDisabled(true);
        const variables = { statementPeriodId };
        closeStatementPeriod({ variables }).catch(e => {
            setDisabled(false);
            setIsModalConfirmButtonDisabled(false);
            setError(e);
            setIsModalOpen(false);
        });
        triggerDbtRefresh();
    };

    const onClick = () => {
        setIsModalOpen(true);
    };

    const modalContent = (
        <div className="StatementPeriodDetail-popup-content">
            <p className="top-text">Are you sure?</p>
            <p>
                Closing this statement period means you cannot assign revenue or
                create accounting periods for this customer statement period.
            </p>
        </div>
    );

    if (isPeriodClosed)
        return (
            <div>
                <Button
                    disabled={true}
                    onClick={() => false}
                    variant="quartenary"
                >
                    <ActionStatusIcon
                        actionStatus={ABACUS_ACTION_STATUSES.COMPLETE}
                    />{' '}
                    Statement Period Closed
                </Button>
            </div>
        );

    return (
        <div className="CloseStatementPeriod">
            <div className="CloseStatementPeriod-btn">
                <Button
                    variant="quartenary"
                    disabled={disabled}
                    onClick={onClick}
                >
                    Close Statement Period
                </Button>
            </div>
            {!adjustmentsAreApplied && (
                <div className="CloseStatementPeriod-help-tooltip">
                    <HelpTooltip
                        testId="CloseStatementPeriodHelpTooltip"
                        id="CloseStatementPeriodHelpTooltip"
                        message={CLOSE_STATEMENT_PERIOD_TOOLTIP_MSG}
                        tooltipPlacement="right"
                    />
                </div>
            )}
            {!areCloseBalancesActionsComplete && (
                <div className="CloseStatementPeriod-help-tooltip">
                    <HelpTooltip
                        testId="CloseBalancesActionsHelpTooltip"
                        id="CloseBalancesActionsHelpTooltip"
                        message={CLOSE_BALANCES_ACTIONS_TOOLTIP_MSG}
                        tooltipPlacement="right"
                    />
                </div>
            )}
            <PopupModal
                className="StatementPeriodDetail-popup"
                closeHandler={() => setIsModalOpen(false)}
                headerLabel="WARNING"
                isOpen={isModalOpen}
                isSaveButtonDisabled={isModalConfirmButtonDisabled}
                modalContent={modalContent}
                saveHandler={handleStatementPeriodClose}
                saveButtonText="Yes, Close This Period"
            />
        </div>
    );
};

export default CloseStatementPeriodButton;