import Footer from '@/components/Footer';
import RightContent from '@/components/RightContent';
import { SettingDrawer } from '@ant-design/pro-components';
import { history, Link, matchRoutes } from '@umijs/max';
import defaultSettings from '../config/defaultSettings';
import { queryCurrentUser, getMenu } from './services/login';
import TagView from '@/components/TagView';
import SiderMenu from '@/components/SiderMenu';
import * as Ant4Icons from '@ant-design/icons';
import { createElement } from 'react';
import routes from '../config/authRoutes';

const { LinkOutlined } = Ant4Icons;
// const isDev = process.env.NODE_ENV === 'development';
const isDev = true;
console.log(isDev);
const loginPath = '/user/login';

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
function strToHump(str) {
  let strArr = str.split('-');
  for (let i = 0; i < strArr.length; i++) {
    strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substr(1);
  }
  let res = strArr.join('');
  return res + 'Outlined';
}

export async function getInitialState() {
  let token = localStorage.getItem('TOKENES');
  const fetchUserInfo = async () => {
    try {
      const msg = await queryCurrentUser();
      return msg.data;
    } catch (error) {
      // history.push(loginPath);
    }
    return undefined;
  }; // 如果是登录页面，不执行

  const getmenuData = async () => {
    try {
      const res = await getMenu();
      return res.data;
    } catch (error) {
      message.error(res.msg);
    }
    return undefined;
  }; // 如果是登录页面，不执行
  if (history.location.pathname !== loginPath && token) {
    const currentUserData = await fetchUserInfo();
    let menuData;
    if (currentUserData?.data?.userName) {
      menuData = await getmenuData();
    }
    /* isdev */
    if (isDev) {
      menuData = {
        recentUsePermList: [],
        collectPerm: [],
        userHavePermList: routes,
      };
    }

    return {
      fetchUserInfo,
      currentUser: currentUserData?.data,
      settings: defaultSettings,
      newMenu: menuData,
      getmenuData,
      collapsed: false,
    };
  }

  let menuData = {};
  if (isDev) {
    menuData = {
      recentUsePermList: [],
      collectPerm: [],
      userHavePermList: routes,
    };
  }

  return {
    fetchUserInfo,
    settings: defaultSettings,
    getmenuData,
    collapsed: false,
    tagList: [],
    newMenu: menuData,
  };
}

// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout = ({ initialState, setInitialState }) => {
  let token = localStorage.getItem('TOKENES');

  let menurender = isDev
    ? {}
    : {
        menuRender: (props, defaultDom) => {
          if (props.isMobile) {
            return defaultDom;
          } else {
            return <SiderMenu {...props} />;
          }
        },
      };

  return {
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    collapsed: initialState.collapsed,
    onCollapse: (cols) => {
      setInitialState((s) => ({ ...s, collapsed: cols }));
    },
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { location } = history;
      // 如果没有登录，重定向到 login
      // if (!initialState?.currentUser && location.pathname !== loginPath) {
      //   history.push(loginPath);
      // }
    },
    links: isDev
      ? [
          // <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
          //   <LinkOutlined />
          //   <span>OpenAPI 文档</span>
          // </Link>,
        ]
      : [],
    //接口获取菜单数据
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.id,
      },
      request: (params, defaultMenuData) => {
        console.log(initialState);
        let lastArr = initialState?.newMenu?.userHavePermList
            ? JSON.parse(JSON.stringify(initialState?.newMenu?.userHavePermList))
            : [],
          newArr = [
            // {
            //   path: '/welcome',
            //   name: '首页',
            //   icon: 'smile',
            //   component: './Welcome',
            //   haveChildren: false,
            //   key: '000000',
            //   parentKey: '0',
            //   routes: [],
            //   children: null,
            //   title: null,
            // },
          ].concat(lastArr);

        return newArr.map((item, index) => {
          if (item.icon) {
            const icon = strToHump(item.icon),
              ItemIcon = Ant4Icons[icon];
            item.icon = createElement(ItemIcon);
          }
          return item;
        });
      },
      locale: false,
    },
    ...menurender,
    // 自定义 403 页面
    unAccessible: <div>unAccessible</div>,
    noFound: <div>noFound</div>,
    // 增加一个 loading 的状态
    childrenRender: (children, props) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {initialState?.currentUser && location.pathname !== loginPath ? (
            <TagView home="/welcome">{children}</TagView>
          ) : (
            children
          )}
        </>
      );
    },
    ...initialState?.settings,
    layout: false,
    headerContentRender: () => <RightContent />,
    rightContentRender: () => null,
  };
};