import type { NotificationPlacement } from '@/components/ui/types/placement';

interface TransitionConfig {
  offsetX: string | number;
  offsetY: string | number;
  placement: NotificationPlacement;
  transitionType: 'scale' | 'fade';
}

export function getPlacementTransition(config: TransitionConfig) {
  const { offsetX, offsetY, placement, transitionType } = config;

  const isTop = placement.includes('top');
  const isBottom = placement.includes('bottom');
  const isStart = placement.includes('start');
  const isEnd = placement.includes('end');
  const isCenter = placement.includes('center');

  let x = 0;
  let y = 0;

  // Determine position
  if (isStart) {
    x = typeof offsetX === 'number' ? offsetX : parseInt(offsetX);
  } else if (isEnd) {
    x = typeof offsetX === 'number' ? -offsetX : -parseInt(offsetX);
  }

  if (isTop) {
    y = typeof offsetY === 'number' ? offsetY : parseInt(offsetY);
  } else if (isBottom) {
    y = typeof offsetY === 'number' ? -offsetY : -parseInt(offsetY);
  }

  // Default positioning styles
  const defaultStyles: React.CSSProperties = {
    position: 'fixed',
    zIndex: 9999,
  };

  if (isTop) {
    defaultStyles.top = typeof offsetY === 'number' ? `${offsetY}px` : offsetY;
  } else if (isBottom) {
    defaultStyles.bottom = typeof offsetY === 'number' ? `${offsetY}px` : offsetY;
  }

  if (isStart) {
    defaultStyles.left = typeof offsetX === 'number' ? `${offsetX}px` : offsetX;
  } else if (isEnd) {
    defaultStyles.right = typeof offsetX === 'number' ? `${offsetX}px` : offsetX;
  } else if (isCenter) {
    defaultStyles.left = '50%';
    defaultStyles.transform = 'translateX(-50%)';
  }

  // Animation variants
  const variants = {
    initial: 
      transitionType === 'scale' 
        ? { opacity: 0, scale: 0.8, x, y }
        : { opacity: 0, x, y },
    animate: 
      transitionType === 'scale'
        ? { opacity: 1, scale: 1, x: 0, y: 0 }
        : { opacity: 1, x: 0, y: 0 },
    exit: 
      transitionType === 'scale'
        ? { opacity: 0, scale: 0.8, x, y }
        : { opacity: 0, x, y },
  };

  return {
    default: defaultStyles,
    variants,
  };
}