import type { Styles } from '@cleartrip/ct-design-types';
import { ReactNode, ReactElement } from 'react';
import type { ContainerRef } from '@cleartrip/ct-design-container';

import { ModalSize, ModalVariant, ModalPlacement, ActionButtonVariant, ActionButtonAlignment } from './constants';

export type ModalSizeTypes = `${ModalSize}`;

type OwnModalProps = {
  /**
   * footerAlignment will give whether to give flex end or start or start
   */
  footerAlignment?: 'start' | 'end' | 'center';
  animationDuration?: number;
};

export type ModalProps = IModalProps;

export type ActionButtonVariantsType = `${ActionButtonVariant}`;
export type ActionButtonAlignmentType = `${ActionButtonAlignment}`;
export type ModalPlacementTypes = `${ModalPlacement}`;
export type ModalVariantTypes = `${ModalVariant}`;

export interface IChildProps {
  onClose?: () => void;
}

export interface IModalProps extends OwnModalProps {
  /** Alignment of the action button. */
  actionButtonAlignment?: ActionButtonAlignmentType;
  /** Type of the action button (back, close, none). */
  actionButtonType?: ActionButtonVariantsType;
  /** Whether clicking on the backdrop should close the modal. */
  allowBackdropClose?: boolean;
  /** Duration of the open/close animation in milliseconds. */
  animationDuration?: number;
  /** Custom backdrop component; replaces the default overlay. */
  backDropComponent?: ReactNode;
  /** Adds a blur/dim effect to the background. */
  blur?: boolean;
  /** Content rendered inside the modal body. */
  children?: ReactElement<{ onClose?: () => void }>;
  /** Whether the modal opens inside a portal. */
  insidePortal?: boolean;
  /** Callback fired when the modal requests to close. */
  onClose?: () => void;
  /** Callback fired on key down events. */
  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
  /** Controls the modal's visibility. */
  open: boolean;
  /** Placement of the modal (center or bottom). */
  placement?: ModalPlacementTypes;
  /** Bottom margin for modal placement. */
  bottomMargin?: number;
  /** Ref to the underlying container. */
  ref?: React.Ref<ContainerRef>;
  /** Size preset controlling the modal's dimensions. */
  size?: ModalSizeTypes;
  /** Style overrides for modal slots. */
  styleConfig?: {
    root?: Styles[];
    backdropStyles?: Styles[];
    modalContentStyles?: Styles[];
    actionButtonStyles?: Styles[];
  };
  /** Visual variant (dark or neutral). */
  variant?: ModalVariantTypes;
  /**
   * hide cross icon
   */
  hideCrossIcon?: boolean;
}