import type { ReactNode } from 'react';
import type { StyleProp, TextProps, ViewStyle } from 'react-native';
import type { SharedValue } from 'react-native-reanimated';
import type {
  AnimationRoot,
  PopupDialogContentAnimation,
  PopupOverlayAnimation,
  PopupRootAnimationConfig,
} from '../../helpers/types/animation';
import type * as DialogPrimitivesTypes from '../../primitives/dialog/dialog.types';

/**
 * Dialog internal state for animation coordination
 */
export type DialogState = 'idle' | 'open' | 'close';

/**
 * Context value for dialog animation state
 */
export interface DialogAnimationContextValue {
  /** Extended internal state for animation control */
  dialogState: DialogState;
  /** Animation progress shared value (0=idle, 1=open, 2=close) */
  progress: SharedValue<number>;
  /** Dragging state shared value */
  isDragging: SharedValue<boolean>;
  /** Gesture release animation running state shared value */
  isGestureReleaseAnimationRunning: SharedValue<boolean>;
}

/**
 * Animation configuration for Dialog root component
 */
export type DialogRootAnimation = AnimationRoot<PopupRootAnimationConfig>;

/**
 * Dialog Root component props
 */
export interface DialogRootProps extends DialogPrimitivesTypes.RootProps {
  /**
   * The content of the dialog
   */
  children?: ReactNode;
  /**
   * Delay in milliseconds before the dialog closes (for exit animations)
   * @default 300
   */
  closeDelay?: number;
  /**
   * Whether to dismiss the keyboard when the dialog closes
   * @default true
   */
  isDismissKeyboardOnClose?: boolean;
  /**
   * Animation configuration for dialog root
   * - `"disable-all"`: Disable all animations including children
   * - `false` or `"disabled"`: Disable only root animations
   * - `true` or `undefined`: Use default animations
   * - `object`: Custom animation configuration
   */
  animation?: DialogRootAnimation;
}

/**
 * Dialog Trigger component props
 */
export interface DialogTriggerProps extends DialogPrimitivesTypes.TriggerProps {
  /**
   * The trigger element content
   */
  children?: ReactNode;
}

/**
 * Dialog Portal component props
 */
export interface DialogPortalProps extends DialogPrimitivesTypes.PortalProps {
  /**
   * Additional CSS class for the portal container
   */
  className?: string;
  /**
   * Additional style for the portal container
   */
  style?: StyleProp<ViewStyle>;
  /**
   * The portal content
   */
  children: ReactNode;
}

/**
 * Animation configuration for Dialog Overlay component
 */
export type DialogOverlayAnimation = PopupOverlayAnimation;

/**
 * Dialog Overlay component props
 */
export interface DialogOverlayProps
  extends Omit<DialogPrimitivesTypes.OverlayProps, 'asChild'> {
  /**
   * Additional CSS class for the overlay
   *
   * @note The following style properties are occupied by animations and cannot be set via className:
   * - `opacity` - Animated for overlay show/hide transitions (idle: 0, open: 1, close: 0)
   *
   * To customize this property, use the `animation` prop:
   * ```tsx
   * <Dialog.Overlay
   *   animation={{
   *     opacity: { value: [0, 1, 0] }
   *   }}
   * />
   * ```
   *
   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
   */
  className?: string;
  /**
   * Animation configuration for overlay
   * - `false` or `"disabled"`: Disable all animations
   * - `true` or `undefined`: Use default animations
   * - `object`: Custom animation configuration
   */
  animation?: DialogOverlayAnimation;
  /**
   * Whether animated styles (react-native-reanimated) are active
   * When `false`, the animated style is removed and you can implement custom logic
   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
   * @default true
   */
  isAnimatedStyleActive?: boolean;
}

/**
 * Animation configuration for Dialog Content component
 * Reuses PopupDialogContentAnimation since they share the same animation behavior
 */
export type DialogContentAnimation = PopupDialogContentAnimation;

/**
 * Dialog Content component props
 */
export interface DialogContentProps
  extends Omit<DialogPrimitivesTypes.ContentProps, 'asChild'> {
  /**
   * Additional CSS class for the content container
   *
   * @note The following style properties are occupied by animations and cannot be set via className:
   * - `opacity` - Animated for content show/hide transitions (idle: 0, open: 1, close: 0)
   * - `transform` (specifically `scale`) - Animated for content show/hide transitions (idle: 0.97, open: 1, close: 0.97)
   *
   * To customize these properties, use the `animation` prop:
   * ```tsx
   * <Dialog.Content
   *   animation={{
   *     opacity: { value: [0, 1, 0] },
   *     scale: { value: [0.97, 1, 0.97] }
   *   }}
   * />
   * ```
   *
   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
   */
  className?: string;
  /**
   * The dialog content
   */
  children?: ReactNode;
  /**
   * Animation configuration for content
   * - `false` or `"disabled"`: Disable all animations
   * - `true` or `undefined`: Use default animations
   * - `object`: Custom animation configuration
   */
  animation?: DialogContentAnimation;
  /**
   * Whether animated styles (react-native-reanimated) are active
   * When `false`, the animated style is removed and you can implement custom logic
   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
   * @default true
   */
  isAnimatedStyleActive?: boolean;
  /**
   * Whether the dialog content can be swiped to dismiss
   * @default true
   */
  isSwipeable?: boolean;
}

/**
 * Dialog Close component props
 */
export interface DialogCloseProps extends DialogPrimitivesTypes.CloseProps {
  /**
   * Close icon props
   */
  iconProps?: DialogCloseIconProps;
  /**
   * Additional CSS class for the close button
   */
  className?: string;
  /**
   * The close button content
   */
  children?: ReactNode;
}

/**
 * Close icon props
 */
export interface DialogCloseIconProps {
  /**
   * Size of the close icon
   * @default 18
   */
  size?: number;
  /**
   * Color of the close icon
   * @default theme color muted
   */
  color?: string;
}

/**
 * Dialog Title component props
 */
export interface DialogTitleProps extends TextProps {
  /**
   * Additional CSS class for the title
   */
  className?: string;
}

/**
 * Dialog Description component props
 */
export interface DialogDescriptionProps extends TextProps {
  /**
   * Additional CSS class for the description
   */
  className?: string;
}