import { useEffect } from 'react'

type ViewportMode = 'desktop' | 'responsive'

const DESKTOP    = 'width=1280'
const RESPONSIVE = 'width=device-width, initial-scale=1.0'

function setMetaViewport(content: string) {
  const meta = document.querySelector<HTMLMetaElement>('meta[name="viewport"]')
  if (meta) meta.content = content
}

export function useFrameViewport(mode: ViewportMode) {
  useEffect(() => {
    setMetaViewport(mode === 'desktop' ? DESKTOP : RESPONSIVE)
    window.parent.postMessage({ type: 'hnf:viewport', mode }, '*')
    return () => {
      setMetaViewport(RESPONSIVE)
      window.parent.postMessage({ type: 'hnf:viewport', mode: 'responsive' }, '*')
    }
  }, [mode])
}