frontend/src/features/roomVisualizer/useRoomVisualizer.ts

import { useState, useRef, useCallback } from "react";

export function useRoomVisualizer() {
  const [hoveredMask, setHoveredMask] = useState<string | null>(null);
  const [selectedMasks, setSelectedMasks] = useState<Set<string>>(new Set());
  const containerRef = useRef<HTMLDivElement>(null);

  const handleMaskMouseEnter = useCallback((maskUrl: string) => {
    setHoveredMask(maskUrl);
  }, []);

  const handleMaskMouseLeave = useCallback(() => {
    setHoveredMask(null);
  }, []);

  const handleMaskClick = useCallback((maskUrl: string) => {
    setSelectedMasks((prev) => {
      const newSelected = new Set(prev);
      if (newSelected.has(maskUrl)) {
        newSelected.delete(maskUrl);
      } else {
        newSelected.add(maskUrl);
      }
      return newSelected;
    });
  }, []);

  return {
    containerRef,
    hoveredMask,
    selectedMasks,
    handleMaskClick,
    handleMaskMouseEnter,
    handleMaskMouseLeave,
  };
}