import { Footer } from '@/components';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { SettingDrawer } from '@ant-design/pro-components';
import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
import { history } from '@umijs/max';
import defaultSettings from '../config/defaultSettings';
import LogoutButton from './components/Base/LogoutButton';
import { errorConfig } from './requestErrorConfig';
import { sign_in } from './services/auth';
const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/user/login';

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.Staff | void;
  loading?: boolean;
}> {
  const account = localStorage.getItem('account') ?? '';
  const password = localStorage.getItem('password') ?? '';
  const signInAccount: API.SignInData = { account, password };

  // // 如果不是登录页面，执行
  const { location } = history;
  if (location.pathname !== loginPath) {
    console.log('signInAccount', signInAccount);
    try {
      const { data, status } = await sign_in(signInAccount);
      if (status) {
        localStorage.setItem('token', data.token);
        history.push('/');

        return {
          currentUser: data,
          settings: defaultSettings as Partial<LayoutSettings>,
        };
      } else {
        history.push(loginPath);
      }
    } catch (error) {
      history.push(loginPath);
    }
  }
  return {
    settings: defaultSettings as Partial<LayoutSettings>,
  };
}
// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    actionsRender: () => [<LogoutButton key="logout" />],

    footerRender: () => <Footer />,

    bgLayoutImgList: [
      {
        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr',
        left: 85,
        bottom: 100,
        height: '303px',
      },
      {
        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr',
        bottom: -68,
        right: -45,
        height: '303px',
      },
      {
        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr',
        bottom: 0,
        left: 0,
        width: '331px',
      },
    ],

    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    // 增加一个 loading 的状态
    childrenRender: (children) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {children}
          {isDev && (
            <SettingDrawer
              disableUrlParams
              enableDarkTheme
              settings={initialState?.settings}
              onSettingChange={(settings) => {
                setInitialState((preInitialState) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        </>
      );
    },
    ...initialState?.settings,
  };
};

/**
 * @name request 配置，可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request: RequestConfig = {
  ...errorConfig,
  requestInterceptors: [
    async (url, options) => {
      // options.headers && options.headers={}
      const token = localStorage.getItem('token') ?? '';
      if (options.headers) {
        // const { currentUser } = await getInitialState();
        // console.log("first", currentUser);
        options.headers.Authorization = `Bearer ${token}`;
      }
      return {
        url,
        options,
      };
    },
  ],
};
