import * as React from 'react';
import Router from './router';
import locale from 'antd/es/locale/zh_CN';
import { ConfigProvider } from 'antd';
import Storage from './utils/storage';
import StoreContext from './hooks/StoreContext';

import { useUserPermission } from './hooks/user';
import { useProjectInfo } from './hooks/project';
import './reset.scss';
const BASE_SIEZ = 18;

function initHtmlSize() {
	const scale = document.documentElement.offsetWidth / 1440;
	document.documentElement.style.fontSize = scale * BASE_SIEZ + 'px';
}
initHtmlSize();
window.addEventListener('resize', initHtmlSize);
export default () => {
	const {
		state: permissionState,
		request: requestUserPermission,
	} = useUserPermission();
	const [
		projectInfoState,
		requestProjectInfo,
		changeProjectInfo,
	] = useProjectInfo();

	React.useEffect(() => {
		const sessionToken = sessionStorage.getItem('token');
		const { sucess } = Storage.getItme('token');
		if (sessionToken || sucess) {
			requestUserPermission();
			requestProjectInfo();
		}
	}, []);
	return (
		<ConfigProvider locale={locale}>
			<StoreContext.Provider
				value={{
					userInfo: {
						username: permissionState.data.user_name,
						isAdmin: permissionState.data.admin,
					},
					projectInfo: projectInfoState.data,
					changeProjectInfo: (data) => {
						changeProjectInfo((preState) => ({
							...preState,
							data: { ...preState.data, ...data },
						}));
					},
					changeUrseInfo: () => {},
				}}>
				<Router isAdmin={permissionState.data.admin}></Router>
			</StoreContext.Provider>
		</ConfigProvider>
	);
};
