import React from 'react';
import type { FC, ReactNode } from 'react';
import { useScrolled } from '@theorchard/suite-utils';
import cx from 'classnames';
import { ModalFooter } from '../modalFooter';
import type { ModalButtonProps } from '../modalFooter';
import { ModalHeader } from '../modalHeader';

type ModalActionEvent = (event: React.MouseEvent | React.KeyboardEvent) => void;

type ModalContentDeprecatedProps =
    | {
          onConfirm?: never;
          confirmTitle?: never;
          confirmDisabled?: never;
          confirmVariant?: never;
          cancelTitle?: never;
          hideCancelButton?: never;
          confirmButtonProps?: never;
          cancelButtonProps?: never;
      }
    | {
          /**
           * @deprecated Use confirmButtonProps.onClick instead
           * Callback when the footer confirm button is pressed.
           */
          onConfirm?: ModalActionEvent;
          /**
           * @deprecated Use confirmButtonProps.title instead
           * Title of the confirm button. Defaults to 'Save'
           */
          confirmTitle?: ReactNode;
          /**
           * @deprecated Use confirmButtonProps.disabled instead
           * Disables the confirm button.
           */
          confirmDisabled?: boolean;
          /**
           * @deprecated Use confirmButtonProps.variant instead
           * Variant for the confirm button.
           * @default primary
           */
          confirmVariant?: string;
          /**
           * Set to hide the footer cancel button.
           */
          hideCancelButton?: boolean;
          /**
           * @deprecated Use cancelButtonProps.title instead
           * Title of the cancel button. Defaults to 'Cancel'
           */
          cancelTitle?: ReactNode;
          /**
           * Props for the confirm button with full ButtonProps control and title
           */
          confirmButtonProps?: ModalButtonProps;
          /**
           * Props for the cancel button with full ButtonProps control and title
           */
          cancelButtonProps?: ModalButtonProps;
      };

export type ModalContentCustomProps = {
    customHeader?: React.ReactNode;
    customFooter?: React.ReactNode;
};

export type ModalContentProps = {
    className?: string;
    style?: React.CSSProperties;
    testId?: string;
    onRequestClose: ModalActionEvent;
    header?: string | React.ReactElement;
    title?: string | React.ReactElement;
    subtitle?: React.ReactNode;
    children: React.ReactNode;
} & ModalContentDeprecatedProps &
    ModalContentCustomProps;

export const ModalContent: FC<ModalContentProps> = ({
    className,
    style,
    testId = 'ModalContent',
    onRequestClose,
    onConfirm,
    confirmTitle,
    confirmDisabled,
    confirmVariant,
    cancelTitle,
    header,
    title,
    subtitle,
    hideCancelButton,
    customHeader,
    customFooter,
    confirmButtonProps,
    cancelButtonProps,
    children,
}) => {
    const { scroll, scrollRef } = useScrolled();

    return (
        <div
            className={cx(
                'ReactModal-content',
                {
                    'ReactModal-scrollTop': scroll.top,
                    'ReactModal-scrollBottom': scroll.bottom,
                },
                className
            )}
            style={style}
            data-testid={testId}
        >
            {customHeader || (
                <ModalHeader
                    header={title ?? header}
                    subtitle={subtitle}
                    onButtonClick={onRequestClose}
                />
            )}

            <div className="ReactModal-body" ref={scrollRef}>
                {children}
            </div>

            {onConfirm || confirmButtonProps ? (
                <ModalFooter
                    onCancel={onRequestClose}
                    onConfirm={onConfirm}
                    confirmTitle={confirmTitle}
                    confirmDisabled={confirmDisabled}
                    confirmVariant={confirmVariant}
                    cancelTitle={cancelTitle}
                    hideCancelButton={hideCancelButton}
                    confirmButtonProps={confirmButtonProps}
                    cancelButtonProps={cancelButtonProps}
                />
            ) : (
                customFooter
            )}
        </div>
    );
};