import React, { useState } from 'react';
import AccountingRunActionButton from 'src/components/accounting-run-list/accounting-run-action-button';
import {
    ACCOUNTING_RUN_ACTIONS as RUN_ACTIONS,
    ACCOUNTING_RUN_STATUSES as RUN_STATUSES,
} from 'src/constants';

export interface AccountingRunActionSectionPropTypes {
    id: number;
    status: string;
}

export const AccountingRunActionSection: React.FC<
    AccountingRunActionSectionPropTypes
> = ({ id, status }) => {
    const [isUpdatingRun, setUpdatingRun] = useState<boolean>(false);

    /* eslint-disable key-spacing */
    const acctRunStatusActions = {
        [RUN_STATUSES.NO_ACTION_TAKEN]: [RUN_ACTIONS.CREATE, RUN_ACTIONS.SKIP],
        [RUN_STATUSES.COMPLETE]: [RUN_ACTIONS.APPROVE, RUN_ACTIONS.INVALIDATE],
        [RUN_STATUSES.SKIPPED]: [RUN_ACTIONS.UNDO],
    };
    /* eslint-enable key-spacing */
    const actions = acctRunStatusActions[status] || [];

    return (
        <div
            data-testid="AccountingRunActionSectionTestId"
            className="AccountingRunSection-Actions"
        >
            {actions.map(action => (
                <AccountingRunActionButton
                    accountingRunId={id}
                    action={action}
                    isUpdatingRun={isUpdatingRun}
                    key={`${action}ActionBtn-${id}`}
                    setUpdatingRun={setUpdatingRun}
                />
            ))}
        </div>
    );
};

export default React.memo(AccountingRunActionSection);