---

import { Button } from 'exchange-elements/v2';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';

import { Portal } from '@src/components/Portal';

import styles from './index.module.scss';

import type { Coords, DropdownPosition, DropdownProps } from './types';

const MENU_GAP = 4;
const VIEWPORT_PADDING = 8;

const oppositePosition: Record<DropdownPosition, DropdownPosition> = {
  bottom: 'top',
  top: 'bottom',
  right: 'left',
  left: 'right',
};

export function Dropdown({
  children,
  selectedValue,
  position = 'bottom',
  className = '',
  buttonClassName = '',
  menuClassName = '',
  anchorRef,
  renderTrigger,
}: DropdownProps) {
  const [isOpenMenu, setIsOpenMenu] = useState(false);
  const [coords, setCoords] = useState<Coords | null>(null);

  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLDivElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);

  const handleToggle = (): void => {
    if (isOpenMenu) {
      handleClose();
      return;
    }

    setIsOpenMenu(true);
  };

  const handleClose = (): void => {
    setIsOpenMenu(false);
    setCoords(null);
  };

  useLayoutEffect(() => {
    if (!isOpenMenu) {
      return;
    }

    const updatePosition = (): void => {
      const triggerElement = triggerRef.current;
      const menuElement = menuRef.current;

      if (!triggerElement || !menuElement) {
        return;
      }

      const triggerRect = triggerElement.getBoundingClientRect();
      const anchorRect =
        anchorRef?.current?.getBoundingClientRect() ?? triggerRect;
      const menuRect = menuElement.getBoundingClientRect();

      const actualPosition = getActualPosition(
        position,
        triggerRect,
        menuRect,
      );

      const nextCoords = getMenuCoords(
        actualPosition,
        triggerRect,
        anchorRect,
        menuRect,
      );

      setCoords(clampToViewport(nextCoords, menuRect));
    };

    updatePosition();

    const resizeObserver = new ResizeObserver(updatePosition);

    if (menuRef.current) {
      resizeObserver.observe(menuRef.current);
    }

    window.addEventListener('resize', updatePosition);
    window.addEventListener('scroll', updatePosition, true);

    return () => {
      resizeObserver.disconnect();

      window.removeEventListener('resize', updatePosition);
      window.removeEventListener('scroll', updatePosition, true);
    };
  }, [anchorRef, isOpenMenu, position]);

  useEffect(() => {
    if (!isOpenMenu) {
      return;
    }

    const handlePointerDown = (event: PointerEvent): void => {
      const target = event.target as Node;

      const isInsideRoot = rootRef.current?.contains(target);
      const isInsideMenu = menuRef.current?.contains(target);

      if (!isInsideRoot && !isInsideMenu) {
        handleClose();
      }
    };

    const handleKeyDown = (event: KeyboardEvent): void => {
      if (event.key === 'Escape') {
        handleClose();
      }
    };

    document.addEventListener('pointerdown', handlePointerDown, true);
    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener(
        'pointerdown',
        handlePointerDown,
        true,
      );
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpenMenu]);

  return (
    <div
      ref={rootRef}
      className={`${styles.dropdown} ${className}`}
    >
      <div ref={triggerRef}>
        {renderTrigger ? (
          renderTrigger({
            isOpen: isOpenMenu,
            onToggle: handleToggle,
            onClose: handleClose,
          })
        ) : (
          <Button
            size="sm"
            onClick={handleToggle}
            className={`${styles.button} ${
              isOpenMenu ? styles.pressed : ''
            } ${buttonClassName}`}
            label={selectedValue}
          />
        )}
      </div>

      {isOpenMenu && (
        <Portal>
          <div
            ref={menuRef}
            className={`${styles.menu} ${menuClassName}`}
            style={{
              top: coords?.top,
              left: coords?.left,
              visibility: coords ? 'visible' : 'hidden',
            }}
          >
            {children}
          </div>
        </Portal>
      )}
    </div>
  );
}

function getActualPosition(
  preferredPosition: DropdownPosition,
  triggerRect: DOMRect,
  menuRect: DOMRect,
): DropdownPosition {
  const fallbackPosition = oppositePosition[preferredPosition];
  const menuSize = isVerticalPosition(preferredPosition)
    ? menuRect.height
    : menuRect.width;

  const preferredSpace = getAvailableSpace(
    preferredPosition,
    triggerRect,
  );

  if (preferredSpace >= menuSize) {
    return preferredPosition;
  }

  const fallbackSpace = getAvailableSpace(
    fallbackPosition,
    triggerRect,
  );

  if (fallbackSpace >= menuSize) {
    return fallbackPosition;
  }

  return preferredSpace >= fallbackSpace
    ? preferredPosition
    : fallbackPosition;
}

function getAvailableSpace(
  position: DropdownPosition,
  triggerRect: DOMRect,
): number {
  if (position === 'top') {
    return triggerRect.top - MENU_GAP - VIEWPORT_PADDING;
  }

  if (position === 'right') {
    return (
      window.innerWidth -
      triggerRect.right -
      MENU_GAP -
      VIEWPORT_PADDING
    );
  }

  if (position === 'left') {
    return triggerRect.left - MENU_GAP - VIEWPORT_PADDING;
  }

  return (
    window.innerHeight -
    triggerRect.bottom -
    MENU_GAP -
    VIEWPORT_PADDING
  );
}

function getMenuCoords(
  position: DropdownPosition,
  triggerRect: DOMRect,
  anchorRect: DOMRect,
  menuRect: DOMRect,
): Coords {
  if (position === 'top') {
    return {
      top: triggerRect.top - menuRect.height - MENU_GAP,
      left: triggerRect.right - menuRect.width,
    };
  }

  if (position === 'right') {
    return {
      top: anchorRect.top,
      left: triggerRect.right + MENU_GAP,
    };
  }

  if (position === 'left') {
    return {
      top: anchorRect.top,
      left: triggerRect.left - menuRect.width - MENU_GAP,
    };
  }

  return {
    top: triggerRect.bottom + MENU_GAP,
    left: triggerRect.right - menuRect.width,
  };
}

function clampToViewport(
  coords: Coords,
  menuRect: DOMRect,
): Coords {
  const maxLeft = Math.max(
    VIEWPORT_PADDING,
    window.innerWidth - menuRect.width - VIEWPORT_PADDING,
  );

  const maxTop = Math.max(
    VIEWPORT_PADDING,
    window.innerHeight - menuRect.height - VIEWPORT_PADDING,
  );

  return {
    left: Math.round(
      Math.max(
        VIEWPORT_PADDING,
        Math.min(coords.left, maxLeft),
      ),
    ),
    top: Math.round(
      Math.max(
        VIEWPORT_PADDING,
        Math.min(coords.top, maxTop),
      ),
    ),
  };
}

function isVerticalPosition(
  position: DropdownPosition,
): boolean {
  return position === 'top' || position === 'bottom';
}


@use '../../theme/mixins' as m;

$menu-width: 200px;

.dropdown {
  position: relative;

  .button {
    @include m.buttonBase;
  }
}

.menu {
  position: fixed;
  width: var(--dropdown-width, $menu-width);
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  padding: var(--space-0250) 0;
  overflow-y: auto;
  border-radius: var(--space-0250);
  background-color: var(--neutral-2);
  font-family: var(--font-family);
  pointer-events: auto;
}



import type {
  PropsWithChildren,
  ReactNode,
  RefObject,
} from 'react';

export type DropdownPosition =
  | 'bottom'
  | 'top'
  | 'right'
  | 'left';

export interface TriggerRenderProps {
  isOpen: boolean;
  onToggle: () => void;
  onClose: () => void;
}

export interface DropdownProps extends PropsWithChildren {
  selectedValue?: ReactNode;
  position?: DropdownPosition;

  className?: string;
  buttonClassName?: string;
  menuClassName?: string;

  anchorRef?: RefObject<HTMLDivElement | null>;
  renderTrigger?: (
    props: TriggerRenderProps,
  ) => ReactNode;
}

export interface Coords {
  top: number;
  left: number;
}