import React, { useEffect, useState } from 'react';
import { computeFloatingPlayerBarStyle } from './computeFloatingPlayerBarStyle';

/** Computes the floating player-bar position based on the current sidebar +
 *  queue panel widths. Returns an inline-style object (left/right/width); only
 *  active when `floatingPlayerBar` is true. Uses a ResizeObserver on both
 *  containers so the bar slides while the sidebar or queue is resized. */
export function useFloatingPlayerBar(
  _playerBarRef: React.RefObject<HTMLElement | null>,
  floatingPlayerBar: boolean,
): React.CSSProperties {
  const [floatingStyle, setFloatingStyle] = useState<React.CSSProperties>({});

  useEffect(() => {
    if (!floatingPlayerBar) return;

    const updatePosition = () => {
      const sidebar = document.querySelector('.sidebar') as HTMLElement | null;
      const queue = document.querySelector('.queue-panel') as HTMLElement | null;

      const sidebarRight = sidebar ? sidebar.getBoundingClientRect().right : 0;
      const queueLeft = queue ? queue.getBoundingClientRect().left : null;

      setFloatingStyle(computeFloatingPlayerBarStyle(sidebarRight, queueLeft, window.innerWidth));
    };

    updatePosition();

    const observer = new ResizeObserver(updatePosition);
    const sidebar = document.querySelector('.sidebar');
    const queue = document.querySelector('.queue-panel');
    if (sidebar) observer.observe(sidebar);
    if (queue) observer.observe(queue);
    window.addEventListener('resize', updatePosition);

    return () => {
      observer.disconnect();
      window.removeEventListener('resize', updatePosition);
    };
  }, [floatingPlayerBar]);

  return floatingStyle;
}
