import React, { useEffect, useState } from 'react';
import './App.css';
import { ContextWindowHeight } from './components/contextWindowHeight';
import { MainScreen } from './components/mainScreen/mainScreen';

function App() {
  // const [windowHeight, setWindowHeight] = useState<number>(window.screen.availHeight);
  const [windowHeight, setWindowHeight] = useState<number>(window.visualViewport.height);

  // window.addEventListener('resize', e => {
  //   //@ts-ignore
  //   setWindowHeight(e.currentTarget.screen.availHeight)
  // })

  window.visualViewport.addEventListener('resize', (e) => {
    //@ts-ignore
    setWindowHeight(e.currentTarget.height, windowHeight)
  })

  useEffect(() => {
    // alert(navigator.userAgent.includes('iPhone'))
    // alert(window.visualViewport.height + '\n' + windowHeight)
  }, [])
    

  

  return (
    <div className="App">
      <ContextWindowHeight.Provider value={windowHeight}>
        <MainScreen />
      </ContextWindowHeight.Provider>
    </div>
  );
}

export default App;
