import { RtDropdownPlacement, RtDropdownProps } from '../rt-dropdown.types';
import { mapAlignment, mapPositionRTL, mapPositionLTR } from './map-position';
import { RefObject } from 'react';
import { Placement } from '@floating-ui/utils';

export const mapPlacementProps = (
  position: RtDropdownProps['position'] = 'top',
  alignment: RtDropdownProps['alignment'] = 'middle',
  ref?: RefObject<HTMLDivElement>
): RtDropdownPlacement => {
  const isFlipped =
    typeof window !== 'undefined' && ref?.current
      ? getComputedStyle(ref.current as Element)?.direction === 'rtl'
      : false;
  const mapPosition = isFlipped ? mapPositionRTL : mapPositionLTR;
  return `${mapPosition[position]}${mapAlignment[alignment]}`;
};

export const mapFloatingPlacement = (placement: Placement) => {
  return placement.split('-')[0];
};