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); - не робит на iphone
  const [windowHeight, setWindowHeight] = useState<number>(window.visualViewport.height);
  const [currentOrientaton, setCurrentOrientaton] = useState<number>(window.orientation);
  

  window.visualViewport.onresize = (e) => {
    //@ts-ignore
    setWindowHeight(e.currentTarget.height);
  }
 
  // !!! работает на свойстве помеченном как deprecate - на айфоне иначе хз как
  window.onorientationchange =  e => {
    //@ts-ignore    
    let angle = e.target.orientation;
    if(currentOrientaton !== angle) {
      setCurrentOrientaton(angle);
    }
  }

  useEffect(() => {
    if(!navigator.userAgent.includes('iPhone')) {
      return;
    }
    if(currentOrientaton === 90) {
      document.querySelector('body').style['paddingLeft'] = 'env(safe-area-inset-left)'
    } else if(currentOrientaton === -90) {
      document.querySelector('body').style['paddingLeft'] = '0'
    }
  }, [currentOrientaton]);

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

export default App;