import { sessionStore } from './store';
import { Truly, Header } from '../components';
import Icon, { IconImg } from '../components/Icon';
import { Space } from 'antd';
import { decodeHtml, isSvg } from './html';
import { Link } from 'umi';
import { isMatchRoute } from '.';
import qs from 'query-string';
import { isEffectiveRoute, pathHolder } from './route';

const DEFAULT_LAYOUT_HIDE_ROUTE_LIST: string[] = [];
const DEFAULT_LAYOUT_MENU_HIDE_ROUTE_LIST: string[] = [];

export const headerRender = () => {
  return <Header />;
};
export const menuDataRender = () => {
  return sessionStore.get('menu-tree-list') || [];
};

export const subMenuItemRender = (item: any) => {
  const { name, icon: preIcon } = item;
  const icon = decodeHtml((preIcon || '') as string);
  return (
    <Space>
      <Truly truly={Boolean(icon)}>
        <Truly
          truly={isSvg(icon)}
          falsyRender={<IconImg url={icon} width={16}></IconImg>}
        >
          <Icon svg={icon} size={16}></Icon>
        </Truly>
      </Truly>
      <span>{name}</span>
    </Space>
  );
};

export const menuItemRender = (item: any) => {
  const { name, icon: preIcon } = item;
  const icon = decodeHtml((preIcon || '') as string);
  return (
    <Link to={item.path}>
      <Space>
        <Truly truly={Boolean(icon)}>
          <Truly
            truly={isSvg(icon)}
            falsyRender={<IconImg url={icon} width={16}></IconImg>}
          >
            <Icon svg={icon} size={16}></Icon>
          </Truly>
        </Truly>
        <span>{name}</span>
      </Space>
    </Link>
  );
};

export const onPageChange = () => {
  document.documentElement.setAttribute('data-render-root', 'hide');

  const { search = '', pathname = '' } = location || {};

  // 修改url地址，记录分组名
  const { _groupName_: _groupName = '', ...querys } = qs.parse(search);
  if (_groupName) {
    sessionStore.set('group-name', _groupName);
  }
  const _groupName_ = _groupName || sessionStore.get('group-name');
  window.history.replaceState(
    {},
    '',
    qs.stringifyUrl({ url: pathname, query: { ...querys, _groupName_ } }),
  );

  // 处理不同路由的layout样式
  const layoutHideRouteList: string[] = DEFAULT_LAYOUT_HIDE_ROUTE_LIST.concat(
    sessionStore.get('layout-hide-route-list') || [],
  ).map(pathHolder);

  const layoutMenuHideRouteList: string[] =
    DEFAULT_LAYOUT_MENU_HIDE_ROUTE_LIST.concat(
      sessionStore.get('layout-menu-hide-route-list') || [],
    ).map(pathHolder);

  const isLayoutMenuHideRoute = layoutMenuHideRouteList.some((path) =>
    isMatchRoute(path, pathname),
  );
  const isLayoutHideRoute = layoutHideRouteList.some((path) =>
    isMatchRoute(path, pathname),
  );
  document.documentElement.setAttribute(
    'data-layout-menu',
    isLayoutMenuHideRoute || isLayoutHideRoute ? 'hide' : 'show',
  );
  document.documentElement.setAttribute(
    'data-layout',
    isLayoutHideRoute ? 'hide' : 'show',
  );

  // 判断路由权限

  if (isEffectiveRoute(pathname)) {
    return document.documentElement.setAttribute('data-render-root', 'show');
  }
  // 当默认输入/时的跳转
  if (pathname === pathHolder('/')) {
    const userInfo = sessionStore.get('user-info');
    const [role] = userInfo?.user?.roles || [];
    const { defaultPage = '' } = role || {};
    if (defaultPage) {
      return location.replace(pathHolder(defaultPage));
    }
  }
  return location.replace(pathHolder('/notFound'));
};
