import os
import re

filepath = 'src/app/map/MapUI.tsx'
with open(filepath, 'r') as f:
    content = f.read()

# 1. Add the ref declaration near the top of the MapUI component
# Search for `const [selectedProperty, setSelectedProperty] = useState<any | null>(null);`
ref_declaration = """ const [selectedProperty, setSelectedProperty] = useState<any | null>(null);
 const sliderRef = useRef<HTMLDivElement>(null);

 // Auto-scroll effect for nearby properties slider
 useEffect(() => {
  const slider = sliderRef.current;
  if (!slider) return;

  let animationFrameId: number;
  let isHovered = false;

  const handleMouseEnter = () => isHovered = true;
  const handleMouseLeave = () => isHovered = false;

  slider.addEventListener('mouseenter', handleMouseEnter);
  slider.addEventListener('mouseleave', handleMouseLeave);
  slider.addEventListener('touchstart', handleMouseEnter); // Pause on touch
  slider.addEventListener('touchend', handleMouseLeave);

  const scroll = () => {
   if (!isHovered && slider) {
    slider.scrollLeft += 0.5; // slow speed
    
    // Reset to beginning if reached the end (with a small buffer)
    if (slider.scrollLeft >= (slider.scrollWidth - slider.clientWidth - 1)) {
       slider.scrollLeft = 0;
    }
   }
   animationFrameId = requestAnimationFrame(scroll);
  };

  animationFrameId = requestAnimationFrame(scroll);

  return () => {
   cancelAnimationFrame(animationFrameId);
   if (slider) {
    slider.removeEventListener('mouseenter', handleMouseEnter);
    slider.removeEventListener('mouseleave', handleMouseLeave);
    slider.removeEventListener('touchstart', handleMouseEnter);
    slider.removeEventListener('touchend', handleMouseLeave);
   }
  };
 }, [selectedProperty]); // Re-run when property changes so we grab the new DOM element if needed
"""

content = content.replace(
    'const [selectedProperty, setSelectedProperty] = useState<any | null>(null);',
    ref_declaration
)

# 2. Attach the ref to the slider container
content = content.replace(
    '<div className="flex gap-4 overflow-x-auto pb-4 snap-x hide-scrollbar" style={{ scrollbarWidth: \'none\', msOverflowStyle: \'none\' }}>',
    '<div ref={sliderRef} className="flex gap-4 overflow-x-auto pb-4 snap-x hide-scrollbar" style={{ scrollbarWidth: \'none\', msOverflowStyle: \'none\' }}>'
)

with open(filepath, 'w') as f:
    f.write(content)
print("Auto-scroll injected.")