import type { Variants } from 'framer-motion';

export const IOS_EASE = [0.22, 0.61, 0.36, 1] as const;
export const IOS_EASE_SOFT = [0.25, 0.8, 0.25, 1] as const;

export const STAGGER_FAST: Variants = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.06,
      delayChildren: 0.04,
    },
  },
};

export const FADE_UP: Variants = {
  hidden: { opacity: 0, y: 10 },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.24,
      ease: IOS_EASE,
    },
  },
};

export const FADE_SCALE: Variants = {
  hidden: { opacity: 0, scale: 0.98 },
  show: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.22,
      ease: IOS_EASE,
    },
  },
};

export function prefersReducedMotion(): boolean {
  if (typeof window === 'undefined') {
    return false;
  }

  return Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches);
}

export function getMotionContainerProps(enabled: boolean, variants: Variants) {
  if (!enabled) {
    return { initial: false } as const;
  }

  return { variants, initial: 'hidden', animate: 'show' } as const;
}

export function getMotionItemProps(enabled: boolean, variants: Variants) {
  return enabled ? { variants } : {};
}

export function getMotionContainerPropsForNavigation(
  enabled: boolean,
  variants: Variants,
  navigationType: 'POP' | 'PUSH' | 'REPLACE'
) {
  if (!enabled) {
    return { initial: false } as const;
  }

  const initial = navigationType === 'POP' ? 'hidden' : false;

  return { variants, initial, animate: 'show' } as const;
}

export function getMotionItemPropsForNavigation(
  enabled: boolean,
  variants: Variants,
  navigationType: 'POP' | 'PUSH' | 'REPLACE'
) {
  if (!enabled) {
    return {};
  }

  const initial = navigationType === 'POP' ? 'hidden' : false;

  return { variants, initial, animate: 'show' } as const;
}
