import { Grid } from 'antd';
import type { ModalProps } from 'antd';

const { useBreakpoint } = Grid;

export type ModalSize = 'small' | 'medium' | 'large' | 'xlarge';

const SIZE_MAP = {
  small: { desktop: 400, tablet: 400, mobile: '100%' },
  medium: { desktop: 520, tablet: 520, mobile: '100%' },
  large: { desktop: 640, tablet: 600, mobile: '100%' },
  xlarge: { desktop: 800, tablet: 700, mobile: '100%' },
} as const;

interface ResponsiveModalOptions {
  size?: ModalSize;
  fullScreenOnMobile?: boolean;
}

/**
 * Hook that returns responsive modal props based on screen size.
 * On mobile, modals take full width. On tablet, they use a slightly smaller width.
 *
 * @example
 * const modalProps = useResponsiveModal({ size: 'medium' });
 * return <Modal {...modalProps} title="My Modal">...</Modal>
 */
export function useResponsiveModal(options: ResponsiveModalOptions = {}): Partial<ModalProps> {
  const { size = 'medium', fullScreenOnMobile = true } = options;
  const screens = useBreakpoint();

  const isMobile = !screens.sm; // < 576px
  const isTablet = screens.sm && !screens.md; // 576px - 768px

  const sizeConfig = SIZE_MAP[size];

  if (isMobile && fullScreenOnMobile) {
    return {
      width: sizeConfig.mobile,
      styles: {
        content: {
          maxWidth: '100vw',
          margin: 0,
          top: 0,
          paddingBottom: 0,
        },
        body: {
          maxHeight: 'calc(100vh - 110px)',
          overflow: 'auto',
        },
      },
      centered: false,
      style: {
        top: 0,
        padding: 0,
        maxWidth: '100%',
      },
    };
  }

  if (isTablet) {
    return {
      width: sizeConfig.tablet,
      styles: {
        content: {
          maxWidth: '90vw',
        },
        body: {
          maxHeight: 'calc(100vh - 200px)',
          overflow: 'auto',
        },
      },
      centered: true,
    };
  }

  // Desktop
  return {
    width: sizeConfig.desktop,
    styles: {
      content: {
        maxWidth: '90vw',
      },
      body: {
        maxHeight: 'calc(100vh - 200px)',
        overflow: 'auto',
      },
    },
    centered: true,
  };
}

export default useResponsiveModal;
