import { Fragment, useEffect, useState } from 'react'
import { FloatLogo, Spin, Empty } from '@chuntianxiaozhu/reactcomponents';
import './App.css'
import { getData } from '@chuntianxiaozhu/utils';
import LifeCycle from './lifecycle';
import Page from './page';

// 简单页面应用容器
function App() {

  const [pageData, setPageData] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getData().then((data) => {
      setPageData(LifeCycle.onLoadData(data));
      setTimeout(() => {
        setLoading(false);
      }, 1000);
    })
  }, []);

  if (loading) {
    return <Spin />
  }

  if (!pageData) {
    return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}><Empty /></div>;
  }

  return <Fragment> <FloatLogo /><Page data={pageData} /></Fragment>
}

export default App