import { StepsConfigItem } from 'src/components/generic-payment-approval/types';
import { Sidecar } from '@theorchard/suite-components';
import React from 'react';
import GenericPaymentStepper from 'src/components/generic-payment-approval/components/generic-payment-stepper';
import useGenericPaymentApproval from 'src/components/generic-payment-approval/hooks/use-generic-payment-approval';
import './styles.scss';

export const CLASSNAME = 'GenericPaymentApprovalFormSidecar';
const CLOSE_BUTTON_TEST_ID = `${CLASSNAME}-close`;

type SidecarProps = React.ComponentProps<typeof Sidecar>;

export interface GenericPaymentApprovalProps {
    sidecarProps: Partial<SidecarProps> & {
        isOpen: boolean;
        setIsOpen: (open: boolean) => void;
    };
    stepsConfig: StepsConfigItem[];
    completedSteps?: string[];
    initialActiveStepId?: string;
    paymentEntityId: string;
}

const GenericPaymentApproval: React.FC<GenericPaymentApprovalProps> = ({
    stepsConfig,
    sidecarProps,
    initialActiveStepId,
    completedSteps,
    paymentEntityId,
}) => {
    const { steps: processedSteps, allStepsComplete } =
        useGenericPaymentApproval({
            stepsConfig,
            completedSteps,
            initialActiveStepId,
            paymentEntityId,
        });
    const { isOpen, setIsOpen, onRequestClose, ...rest } = sidecarProps;
    const close = () => setIsOpen(false);

    return (
        <Sidecar
            title="Payment Approval"
            className={CLASSNAME}
            onRequestClose={close}
            onConfirm={close}
            confirmVariant="quartenary"
            confirmTitle={allStepsComplete ? 'Close' : 'Cancel'}
            confirmButtonProps={{
                testId: CLOSE_BUTTON_TEST_ID,
            }}
            isOpen={isOpen}
            hideCancelButton
            {...rest}
        >
            <GenericPaymentStepper stepsConfig={processedSteps} />
        </Sidecar>
    );
};

export default GenericPaymentApproval;