export const transformContainerId = 'cube-transform-container'

export function getRotation({
  mousePosition,
  range,
  offset,
}: {
  mousePosition: number
  range: number
  offset: number
}) {
  const MAX_ROTATION = 55
  const maxPosition = Math.max(offset, range - offset)
  const multiplier = MAX_ROTATION / maxPosition
  const offsetCenter = mousePosition - offset

  return offsetCenter * multiplier
}

export function handleMousemove({ view, x, y }: any) {
  const DEFAULT_ROTATION_Y = 45
  const DEFAULT_ROTATION_X = -15
  const el = window.document.getElementById(transformContainerId)

  if (!el) {
    return
  }

  const { width, left, height, top } = el.getBoundingClientRect()

  const getX = (mousePosition: number) => {
    return (
      DEFAULT_ROTATION_X -
      getRotation({
        mousePosition,
        range: view.innerHeight,
        offset: top + height / 2,
      })
    )
  }

  const getY = (mousePosition: number) => {
    return (
      DEFAULT_ROTATION_Y +
      getRotation({
        mousePosition,
        range: view.innerWidth,
        offset: left + width / 2,
      })
    )
  }

  el.style.transform = `rotateX(${getX(y)}deg) rotateY(${getY(x)}deg)`
}