import { Platform, type ViewStyle } from 'react-native';
import type { AnchorLayout, SliderOrientation } from '@cdx-ui/primitives';

export const SLIDER_POPUP_OFFSET = 8;
export const SLIDER_POPUP_Z_INDEX = 9999;

/**
 * Popover-style placement for the slider value tooltip, modeled after anchored
 * popover content positioning (placement + offset relative to a measured trigger).
 */
export function getSliderPopupAnchorStyle(
  anchor: AnchorLayout,
  orientation: SliderOrientation,
  offset = SLIDER_POPUP_OFFSET,
): ViewStyle {
  const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];

  if (orientation === 'vertical') {
    const centerY = anchor.y + anchor.height / 2;
    return {
      position,
      left: anchor.x + anchor.width + offset,
      top: centerY,
      zIndex: SLIDER_POPUP_Z_INDEX,
      transform: [{ translateY: '-50%' }] as ViewStyle['transform'],
    };
  }

  const centerX = anchor.x + anchor.width / 2;
  return {
    position,
    left: centerX,
    top: anchor.y - offset,
    zIndex: SLIDER_POPUP_Z_INDEX,
    transform: [{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'],
  };
}