import React, { useEffect } from 'react';
import { useTimeout } from 'react-use';
import { formatMessage } from 'umi-plugin-locale';
import { isDev } from '@/utils/utils';
import splash from '@/assets/splash.png';

import styles from './index.css';
import { init, destory } from '@/utils/h5plus';

const BasicLayout: React.FC = props => {
  const [isReady, cancel] = useTimeout(isDev ? 100 : 1500);

  useEffect(() => {
    init();

    return () => {
      destory();
      if (!isReady()) cancel();
    };
  }, []);

  if (!isReady()) {
    return (
      <div className={styles.splash}>
        <div className={styles.centered}>
          <span>{formatMessage({ id: 'index.start1' })}</span>
          <span>{formatMessage({ id: 'index.start2' })}</span>
        </div>
        <span className={styles.bottom}>{formatMessage({ id: 'app.name' })}</span>
      </div>
    );
  }

  return (
    <div className={styles.normal}>
      {props.children}
    </div>
  );
};

export default BasicLayout;
