import React from 'react';
import { Button } from '@theorchard/suite-components';
import { ActionStatusIcon } from 'src/components/shared/action-status-icon';
import { ACCOUNTING_PERIOD_STATUSES } from 'src/constants';
import { ABACUS_ACTION_STATUSES } from '@theorchard/accounting-apps-shared';

export interface ClosePeriodActionPropTypes {
    accountingPeriodStatus:
        | (typeof ACCOUNTING_PERIOD_STATUSES)[keyof typeof ACCOUNTING_PERIOD_STATUSES]
        | null
        | undefined;
    periodClosed: (typeof ABACUS_ACTION_STATUSES)[keyof typeof ABACUS_ACTION_STATUSES];
}

export const ClosePeriodAction: React.FC<ClosePeriodActionPropTypes> = ({
    accountingPeriodStatus,
    periodClosed,
}) => (
    <div className="AccountingPeriodDetail-close-period-actionsBox">
        {periodClosed === ABACUS_ACTION_STATUSES.COMPLETE &&
            accountingPeriodStatus === ACCOUNTING_PERIOD_STATUSES.CLOSED && (
                <div className="PeriodClosed">
                    <Button
                        data-testid="periodClosed"
                        disabled
                        id="periodClosed"
                        onClick={() => false}
                        variant="quartenary"
                    >
                        <span className="PeriodClosedText">
                            <ActionStatusIcon actionStatus={periodClosed} />
                            Period Closed
                        </span>
                    </Button>
                </div>
            )}
    </div>
);