import React, {useEffect} from "react";
import {DesktopLayout} from "./DesktopLayout";
import {useMediaQuery} from 'react-responsive';
import {useStore} from "../../utils/useStore";
import {useHistory} from "react-router-dom";


export const App = () => {
  // TODO: add mobile layout
  const store = useStore();
  const mediaQuery = {
    isDesktop: useMediaQuery({minWidth: 1024}),
    isTablet: useMediaQuery({minWidth: 768, maxWidth: 1023}),
    isMobile: useMediaQuery({maxWidth: 767}),
    isNotMobile: useMediaQuery({minWidth: 768}),
  };

  useEffect(() => {
    store.ui.setMediaQuery(mediaQuery);
  });
//   const isMobileDevice = useMediaQuery({
//     query: "(min-device-width: 480px)",
//   });
  return <DesktopLayout/>;
};