import { useEffect, useState } from 'react'

/** Совпадает с мобильным брейкпоинтом комнаты (`room.css`, `max-width: 600px`). */
const COMPACT_VIEWPORT_QUERY = '(max-width: 600px)'

/**
 * Живое отслеживание мобильной ширины — та же схема, что системная тема в
 * `useTheme.ts` (matchMedia + change-листенер).
 *
 * Нужен там, где мобильный вариант — это ДРУГАЯ разметка, а не другие стили:
 * шторка вместо модалки (`DeviceSettingsDialog`) и условный рендеринг кнопок
 * тулбара (`RoomToolbar`). Прятать элементы новым CSS-правилом поверх
 * медиазапроса в `room.css` намеренно не стали — там уже была битва
 * специфичности (см. комментарий в конце `room.css`).
 */
export function useIsCompactViewport(): boolean {
  const [isCompact, setIsCompact] = useState(() => window.matchMedia(COMPACT_VIEWPORT_QUERY).matches)

  useEffect(() => {
    const media = window.matchMedia(COMPACT_VIEWPORT_QUERY)
    const handleChange = (event: MediaQueryListEvent) => setIsCompact(event.matches)
    media.addEventListener('change', handleChange)
    return () => media.removeEventListener('change', handleChange)
  }, [])

  return isCompact
}