import './index.less';
import { DeclareDialog } from '@/components/declare-dialog';
import { Header } from '@/components/header';
import { LAYER_HOST_ID } from '@/constants';
import { CommonProvider } from '@/context';
import { initializeIcons } from '@fluentui/react';
import dayjs from 'dayjs';
import zhCn from 'dayjs/locale/zh-cn';
import { NotificationsProvider, setUpNotifications } from 'reapop';
import 'tailwindcss/tailwind.css';
import { IRouteComponentProps } from 'umi';

initializeIcons(
  'https://static2.sharepointonline.com/files/fabric/assets/icons/',
);

dayjs.locale(zhCn);

setUpNotifications({
  defaultProps: {
    position: 'top-center',
    dismissible: true,
    dismissAfter: 3000,
  },
});

export default function Layout({
  children,
  location,
  route,
  history,
  match,
}: IRouteComponentProps) {
  return (
    <NotificationsProvider>
      <CommonProvider>
        <div className="flex flex-col h-screen">
          <Header />
          <div className="flex-1 overflow-auto flex flex-col">{children}</div>
        </div>
        <DeclareDialog />
        <div
          id={LAYER_HOST_ID}
          style={{ position: 'fixed', top: 0, zIndex: 1 }}
        />
      </CommonProvider>
    </NotificationsProvider>
  );
}