import React, { useEffect, useState } from 'react';
import { Button } from '@theorchard/suite-components';
import { useParams } from 'react-router-dom';
import { useCreateStatementPeriodAbacusEvent } from 'src/apollo/mutations/statement-periods';
import { RELEASE_RESERVES } from 'src/constants';
import { ActionStatusIcon } from '../shared/action-status-icon';
import type { AbacusEvent } from 'src/types/abacus-event';
import type { ActionState } from 'src/types/action-state';
import { ABACUS_ACTION_STATUSES } from '@theorchard/accounting-apps-shared';

export interface PropTypes {
    /* eslint-disable no-unused-vars */
    abacusEvent?: AbacusEvent | null;
    actionState?: ActionState | null;
    setError: (error: string) => void;
    /* eslint-enable no-unused-vars */
}

export const ReleasePhysicalReservesButton: React.FC<PropTypes> = ({
    abacusEvent,
    actionState,
    setError,
}) => {
    const { statementPeriodId } = useParams<{ statementPeriodId: string }>();
    const [isDisabled, setIsDisabled] = useState(false);
    const addAbacusEvent = useCreateStatementPeriodAbacusEvent();

    const isInitStatus =
        actionState?.actionStatus === ABACUS_ACTION_STATUSES.INIT;
    const isComplete =
        actionState?.actionStatus === ABACUS_ACTION_STATUSES.COMPLETE;

    useEffect(() => {
        if (!isInitStatus || abacusEvent) setIsDisabled(true);
    }, [isInitStatus, abacusEvent]);

    const onClick = () => {
        setIsDisabled(true);
        addAbacusEvent({
            variables: {
                eventName: RELEASE_RESERVES.EVENT_NAME,
                targetId: parseInt(statementPeriodId, 10),
            },
        }).catch(error => {
            setError(error);
        });
    };

    return (
        <div>
            <Button
                className={`ReleaseReserves ${isDisabled ? 'disabled' : ''}`}
                variant="quartenary"
                disabled={isDisabled}
                onClick={onClick}
            >
                {actionState?.actionStatus !== ABACUS_ACTION_STATUSES.INIT && (
                    <ActionStatusIcon
                        actionStatus={actionState?.actionStatus || ''}
                    />
                )}
                {isComplete
                    ? 'Physical Reserves Released'
                    : 'Release Physical Reserves'}
            </Button>
        </div>
    );
};