import React, { useState } from 'react';
import { Button, HelpTooltip, Modal } from '@theorchard/suite-components';
import { ActionStatusIcon } from 'src/components/shared/action-status-icon';
import { SALES_DELIVERED_LINK_HELP_MSG } from 'src/constants';
import { ABACUS_ACTION_STATUSES } from '@theorchard/accounting-apps-shared';
import type { AbacusAccountingPeriodActionState } from 'src/types/accounting-period';

export interface DeliverSalesFilesPropTypes {
    abacusStateId: string;
    updatePeriodState: (
        // eslint-disable-next-line no-unused-vars
        newState: Partial<AbacusAccountingPeriodActionState>[]
    ) => Promise<void>;
    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-explicit-any
    areSalesDelivered: boolean;
    isButtonDisabled: boolean;
    setError: (error: string) => void;
}

export const DeliverSalesFiles: React.FC<DeliverSalesFilesPropTypes> = ({
    abacusStateId,
    updatePeriodState,
    areSalesDelivered,
    isButtonDisabled,
    setError,
}) => {
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
    const [isSaveButtonDisabled, setIsSaveButtonDisabled] = useState(false);

    const modalContent = (
        <div
            className="DeliverFiles-modal"
            data-testid="DeliverFilesModelTestid"
        >
            <p>
                Are you sure you want to set the Period to &quot;All Sales
                Delivered?&quot;
            </p>

            <p>
                Once set, no additional sales can be added to this Accounting
                Period.
            </p>

            <p className="warning">You cannot undo this action!</p>
        </div>
    );

    const updateActionState = () => {
        setIsSaveButtonDisabled(true);
        updatePeriodState([
            {
                abacusStateId,
                actionStatus: ABACUS_ACTION_STATUSES.COMPLETE,
            },
        ])
            .then(() => {
                setIsSaveButtonDisabled(false);
                setIsModalOpen(false);
            })
            .catch(err => {
                setError(err);
                setIsSaveButtonDisabled(false);
                setIsModalOpen(false);
            });
    };

    return (
        <div className="DeliverFiles">
            <Button
                data-testid="deliverSalesBtn"
                disabled={isButtonDisabled || areSalesDelivered}
                id="deliverSalesBtn"
                onClick={() => setIsModalOpen(true)}
                variant="quartenary"
            >
                {areSalesDelivered ? (
                    <span className="SalesDeliveredText">
                        <ActionStatusIcon
                            actionStatus={ABACUS_ACTION_STATUSES.COMPLETE}
                        />{' '}
                        All Sales Delivered
                    </span>
                ) : (
                    'Mark All Sales Delivered'
                )}
            </Button>
            {isButtonDisabled && !areSalesDelivered && (
                <HelpTooltip
                    id="help-id"
                    message={SALES_DELIVERED_LINK_HELP_MSG}
                    testId="deliverSalesFilesTooltip"
                />
            )}
            {isModalOpen && (
                <Modal
                    isOpen={isModalOpen}
                    onRequestClose={() =>
                        isSaveButtonDisabled ? false : setIsModalOpen(false)
                    }
                    title="WARNING"
                    confirmButtonProps={{
                        disabled: isSaveButtonDisabled,
                        variant: 'primary',
                        loading: isSaveButtonDisabled,
                        title: 'Confirm',
                        onClick: () => updateActionState(),
                    }}
                >
                    {modalContent}
                </Modal>
            )}
        </div>
    );
};