import { useReducedMotion } from 'framer-motion'
import { useEffect, useState } from 'react'

import { clientAnimationTransition, clientMotionTokens } from '@/lib/clientAnimation'
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'


export const useClientMotion = () => {
  const settings = useClientBehaviourSettings ()
  const osReduced = useReducedMotion ()
  const [hydrated, setHydrated] = useState (false)
  useEffect (() => setHydrated (true), [])
  const mode = hydrated ? (osReduced ? 'reduced' : settings.animation ?? 'normal') : 'normal'
  const reduced = mode !== 'normal'
  const duration = (kind: keyof typeof clientMotionTokens.durationMS) =>
      reduced ? 0 : clientMotionTokens.durationMS[kind]
  const transition = (kind: keyof typeof clientMotionTokens.durationMS) =>
      clientAnimationTransition (mode, {
          normal: { duration: duration (kind) / 1000, ease: clientMotionTokens.easing },
          reduced: { duration: 0 } })
  return { reduced, duration, transition, easing: clientMotionTokens.cssEasing }
}