import { useRef } from 'react';
import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
import { IconClose } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import styles from './Drawer.module.scss';
import type { DrawerProps } from './types';

/**
 * Bottom-sheet drawer built on `@base-ui/react/drawer`.
 *
 * Drawer extends Dialog, so `<Drawer.Portal>` must always be present.
 * Default is a full-viewport overlay portalled to `document.body`. Pass
 * `position="absolute"` to portal into a local anchor instead, so the
 * nearest positioned ancestor contains the overlay (avoids z-index fights
 * inside another modal).
 */
export function Drawer({
  open,
  defaultOpen = false,
  position = 'fixed',
  swipeDirection = 'down',
  modal = true,
  showHeader = true,
  title = '',
  showClose = true,
  closeAriaLabel = 'Close',
  showOverlay = true,
  size,
  className,
  overlayClassName,
  contentClassName,
  style,
  children,
  header,
  footer,
  onOpenChange,
  onClose,
}: DrawerProps) {
  const resolvedPosition = position ?? 'fixed';
  const resolvedSwipeDirection = swipeDirection ?? 'down';
  const isAnchored = resolvedPosition === 'absolute';
  const anchorRef = useRef<HTMLDivElement>(null);

  const handleOpenChange = (nextOpen: boolean) => {
    onOpenChange?.(nextOpen);
    if (!nextOpen) {
      onClose?.();
    }
  };

  const isHorizontal = resolvedSwipeDirection === 'left' || resolvedSwipeDirection === 'right';
  const sizeStyle = size
    ? { [isHorizontal ? 'width' : 'height']: size }
    : undefined;

  const positionClass = styles[`base-drawer--${resolvedPosition}`];
  const swipeClass = styles[`base-drawer--swipe-${resolvedSwipeDirection}`];

  const surface = (
    <>
      {showOverlay && (
        <BaseDrawer.Backdrop
          // Base UI hides the backdrop of a nested drawer by default (to avoid
          // stacking a second dim layer). When anchored inside another modal
          // (e.g. a full-screen Dialog) we still want our own local backdrop,
          // so force it to render.
          forceRender
          className={cs(
            styles['base-drawer__overlay'],
            positionClass,
            overlayClassName,
          )}
        />
      )}
      <BaseDrawer.Viewport
        className={cs(
          styles['base-drawer__viewport'],
          positionClass,
          swipeClass,
        )}
      >
        <BaseDrawer.Popup
          className={cs(
            styles['base-drawer__content'],
            positionClass,
            swipeClass,
            contentClassName,
            className,
          )}
          style={{ ...sizeStyle, ...style }}
        >
          {showHeader && (
            <div className={styles['base-drawer__header']}>
              {header ?? (
                <>
                  <BaseDrawer.Title className={styles['base-drawer__title']}>
                    {title}
                  </BaseDrawer.Title>
                  {showClose && (
                    <BaseDrawer.Close
                      className={styles['base-drawer__close']}
                      aria-label={closeAriaLabel}
                    >
                      <IconClose />
                    </BaseDrawer.Close>
                  )}
                </>
              )}
            </div>
          )}
          {/* Scrollable body opts out of swipe-to-dismiss so list pans don't
              fight the drawer gesture. Header + overlay still dismiss. */}
          <BaseDrawer.Content
            className={styles['base-drawer__body']}
            data-base-ui-swipe-ignore=""
          >
            {children}
          </BaseDrawer.Content>
          {footer && <div className={styles['base-drawer__footer']}>{footer}</div>}
        </BaseDrawer.Popup>
      </BaseDrawer.Viewport>
    </>
  );

  const drawer = (
    <BaseDrawer.Root
      {...(open !== undefined ? { open } : {})}
      defaultOpen={defaultOpen}
      swipeDirection={resolvedSwipeDirection}
      modal={modal}
      onOpenChange={handleOpenChange}
    >
      <BaseDrawer.Portal container={isAnchored ? anchorRef : undefined}>
        {surface}
      </BaseDrawer.Portal>
    </BaseDrawer.Root>
  );

  if (!isAnchored) {
    return drawer;
  }

  return (
    <div ref={anchorRef} className={styles['base-drawer__anchor']}>
      {drawer}
    </div>
  );
}

export default Drawer;