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

export interface ApproveSalesFilesPropTypes {
    actionStatus: string;
}

export const ApproveSalesFiles: React.FC<ApproveSalesFilesPropTypes> = ({
    actionStatus,
}) => {
    const areAllSalesApproved =
        actionStatus === ABACUS_ACTION_STATUSES.COMPLETE;

    return (
        <div className="ApproveSalesFiles">
            <Button
                data-testid="approveSalesFilesBtn"
                disabled={true}
                id="ApproveSalesFiles"
                onClick={() => false}
                variant="quartenary"
            >
                {areAllSalesApproved ? (
                    <span
                        className="ApproveSalesFilesText"
                        data-testid="approveSalesFilesApprovedState"
                    >
                        <ActionStatusIcon
                            actionStatus={ABACUS_ACTION_STATUSES.COMPLETE}
                        />{' '}
                        All Sales Approved
                    </span>
                ) : (
                    <span>APPROVE ALL SALES</span>
                )}
            </Button>
            {!areAllSalesApproved && (
                <span data-testid="approveSalesFilesHelpIcon">
                    <HelpTooltip
                        id="help-id"
                        message={APPROVE_SALES_FILES_HELP_MSG}
                    />
                </span>
            )}
        </div>
    );
};