import React from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import { useModel } from '@/store';
import { Loading, Notify } from '@antmjs/vantui';
import NavLoading from '@/components/NavLoading';
import Auth from '@/components/Auth';
import TabBar from './TabBar';
import laySty from './layout.module.less';

export default (props) => {
  const { className, style, roles, tabBar = false, loading } = props;

  const { person, user } = useModel('user');

  const containerClass = `${laySty['page-conatiner']} ${tabBar ? laySty['with-tabbar'] : ''} ${className}`;

  React.useEffect(() => {
    if (person && !user) {
      const currentPage = Taro.getCurrentPages().slice().pop();
      if ('pages/login/index' !== currentPage.route) {
        Taro.navigateTo({
          url: '/pages/login/index',
        })
      }
    }
  }, [person, user]);

  return (
    <View className={laySty['page-wrapper']}>
      <Notify id="vanNotify" />
      <NavLoading loading={loading} />
      <View className={containerClass} style={style}>
        {
          !person && (
            <View className={laySty.loading}>
              <Loading size="32px" vertical>
                加载中...
              </Loading>
            </View>
          )
        }
        <Auth roles={roles}>
          {props.children}
        </Auth>

        {
          !tabBar && (
            <View className={laySty['pdm-space']}></View>
          )
        }
      </View>
      {
        tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} user={user} />
      }
    </View>
  )
}