import type { FC, ReactNode } from 'react';
import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import cx from 'classnames';
import { Button } from '../../bootstrap';
import type { ButtonProps } from '../../bootstrap';

export const CLASSNAME = 'ModalFooter';

export type ModalButtonProps = Omit<ButtonProps, 'title' | 'children'> & {
    /**
     * Button text content.
     */
    title?: ReactNode;
};

export interface Props {
    className?: string;
    onCancel?: (event: React.MouseEvent | React.KeyboardEvent) => void;
    onConfirm?: (event: React.MouseEvent | React.KeyboardEvent) => void;
    /**
     * @deprecated Use confirmButtonProps.title instead
     */
    confirmTitle?: ReactNode;
    /**
     * @deprecated Use confirmButtonProps.disabled instead
     */
    confirmDisabled?: boolean;
    /**
     * @deprecated Use confirmButtonProps.variant instead
     */
    confirmVariant?: string;
    /**
     * @deprecated Use cancelButtonProps.title instead
     */
    cancelTitle?: ReactNode;
    hideCancelButton?: boolean;
    confirmButtonProps?: ModalButtonProps;
    cancelButtonProps?: ModalButtonProps;
}

export const ModalFooter: FC<Props> = ({
    className,
    onCancel,
    onConfirm,
    confirmTitle,
    cancelTitle,
    hideCancelButton = false,
    confirmDisabled = false,
    confirmVariant = 'primary',
    confirmButtonProps,
    cancelButtonProps,
}) => {
    const cancelProps = {
        // defaults
        variant: 'quartenary' as const,
        size: 'lg' as const,
        onClick: onCancel,
        // overrides
        ...cancelButtonProps,
    };

    const confirmProps = {
        variant: confirmVariant,
        size: 'lg' as const,
        onClick: onConfirm,
        disabled: confirmDisabled,
        ...confirmButtonProps,
    };

    return (
        <footer className={cx(className, CLASSNAME, 'ReactModal-footer')} data-testid={CLASSNAME}>
            {!hideCancelButton && (
                <Button {...cancelProps} title={undefined}>
                    {cancelButtonProps?.title ?? cancelTitle ?? formatMessage('cancel')}
                </Button>
            )}

            {(onConfirm || confirmButtonProps) && (
                <Button {...confirmProps} title={undefined}>
                    {confirmButtonProps?.title ?? confirmTitle ?? formatMessage('save')}
                </Button>
            )}
        </footer>
    );
};