import Logo from '@/assets/bitcoin.webp';
import { MyIcons, MyIconsType, PermissionsType, useMyState } from '@/common';
import { Link, RuntimeConfig, history } from '@umijs/max';
import AvatarProps from '../../components/layout/AvatarProps';

const loopMenu = (permissions: PermissionsType[] | undefined) => {
  let tree: PermissionsType[] = [];
  let map: Record<number, PermissionsType> = {};
  permissions?.forEach((permission) => {
    map[permission.id] = {
      path: permission.type === 'Button' ? 'null' : permission.path,
      name: permission.name,
      icon: permission.icon && MyIcons[permission.icon as MyIconsType],
      children: [],
      hideInMenu: permission.type === 'Button',
    };
  });

  permissions?.forEach((permission) => {
    let node = map[permission.id];
    if (permission.parent_id !== null) {
      map[permission.parent_id].children.push(node);
    } else {
      tree.push(node);
    }
  });

  return tree?.[0]?.children;
};

export const LayoutConfig: RuntimeConfig['layout'] = () => {
  const { snap } = useMyState();

  return {
    title: snap.session.campus?.name ?? '总后台',
    logo: <img src={Logo} style={{ height: '30px' }} />,
    layout: 'mix',
    colorPrimary: '#1890ff',
    siderWidth: 220,
    pure: history.location.pathname === '/login',
    avatarProps: {
      render: () => <AvatarProps user={snap.session.user} />,
    },
    waterMarkProps: {
      content: snap.session.user?.username,
    },
    collapsedButtonRender: false,
    token: {
      bgLayout: '#eef0f3',
      header: {
        colorBgHeader: '#001529',
        colorHeaderTitle: '#FFF',
        colorTextRightActionsItem: '#FFF',
        heightLayoutHeader: 50,
      },
      sider: {
        colorMenuBackground: '#FFF',
      },
    },
    menuItemRender: (item, dom) => <Link to={item.path || '/'}>{dom}</Link>,
    menu: {
      params: snap.session.permissions,
      request: async () => {
        let objjs: any = [];
        snap.session.permissions?.forEach((res: any) => {
          objjs.push(res);
        });
        let data = objjs.sort((a: any, b: any) => {
          return a._lft - b._lft;
        });
        const menus = loopMenu(data);
        return Promise.resolve(menus);
      },
    },
    unAccessible: <div>unAccessible</div>,
  };
};