import React from 'react';
import { getToken } from '@component/utils';
import Icon from '@ant-design/icons';
import { ReactComponent as User } from 'icons/user.svg';
import { ReactComponent as Government } from 'icons/government.svg';
import { ReactComponent as Enterprise } from 'icons/enterprise.svg';
import { ReactComponent as Role } from 'icons/role.svg';
import { ReactComponent as ThirdPartyService } from 'icons/thirdPartyService.svg';
import { ReactComponent as ServiceFeeFileManagement } from 'icons/serviceFeeFileManagement.svg';
import { ReactComponent as Template } from 'icons/template.svg';
import { ReactComponent as ServicesApply } from 'icons/servicesApply.svg';
import { ReactComponent as ServicesPlan } from 'icons/servicesPlan.svg';
import { ReactComponent as ServicesWork } from 'icons/servicesWork.svg';
import { ReactComponent as ReturnVisitManage } from 'icons/returnVisitManage.svg';
import { ReactComponent as PreventionServiceProgress } from 'icons/preventionServiceProgress.svg';
import { ReactComponent as CatastropheWarning } from 'icons/catastropheWarning.svg';
import { ReactComponent as PublicityEducationList } from 'icons/publicityEducationList.svg';
import { ReactComponent as PendingWorkbench } from 'icons/pendingWorkbench.svg';
import { ReactComponent as PreventionServiceSearch } from 'icons/preventionServiceSearch.svg';
import { ReactComponent as dynamic } from 'icons/dynamic.svg';
import { ReactComponent as statisticalAnalysisReport } from 'icons/statisticalAnalysisReport.svg';
import { ReactComponent as didLog } from 'icons/didLog.svg';
import { ReactComponent as loginLog } from 'icons/loginLog.svg';
import { ReactComponent as serviceControl } from 'icons/serviceControl.svg';
import { ReactComponent as smokeIcon } from 'icons/smoke.svg';
// import { ReactComponent as UnderwritingInformationStatistics } from 'icons/underwritingInformationStatistics.svg';
// import { ReactComponent as ClaimSettlementInformationStatistics } from 'icons/claimSettlementInformationStatistics.svg';
import MENU from './menu';
import { isEmpty, map } from 'lodash';
import axios from 'axios';

const IconMap = {
	dynamic: <Icon style={{ fontSize: 18 }} component={dynamic} />,
	statisticalAnalysisReport: (
		<Icon style={{ fontSize: 18 }} component={statisticalAnalysisReport} />
	),
	preventionServiceSearch: (
		<Icon style={{ fontSize: 18 }} component={PreventionServiceSearch} />
	),
	pendingWorkbench: (
		<Icon style={{ fontSize: 18 }} component={PendingWorkbench} />
	),
	user: <Icon style={{ fontSize: 18 }} component={User} />,
	// user: <UserOutlined style={{fontSize:18}} />,
	government: <Icon style={{ fontSize: 18 }} component={Government} />,
	enterprise: <Icon style={{ fontSize: 18 }} component={Enterprise} />,
	role: <Icon style={{ fontSize: 18 }} component={Role} />,
	thirdPartyService: (
		<Icon style={{ fontSize: 18 }} component={ThirdPartyService} />
	),
	serviceFeeFileManagement: (
		<Icon style={{ fontSize: 18 }} component={ServiceFeeFileManagement} />
	),
	template: <Icon style={{ fontSize: 18 }} component={Template} />,
	didLog: <Icon style={{ fontSize: 18 }} component={didLog} />,
	loginLog: <Icon style={{ fontSize: 18 }} component={loginLog} />,
	smokeSystem: <Icon style={{ fontSize: 18 }} component={smokeIcon} />,
	serviceControl: <Icon style={{ fontSize: 18 }} component={serviceControl} />,
	servicesApply: <Icon style={{ fontSize: 18 }} component={ServicesApply} />,
	servicesPlan: <Icon style={{ fontSize: 18 }} component={ServicesPlan} />,
	servicesWork: <Icon style={{ fontSize: 18 }} component={ServicesWork} />,
	returnVisitManage: (
		<Icon style={{ fontSize: 18 }} component={ReturnVisitManage} />
	),
	preventionServiceProgress: (
		<Icon style={{ fontSize: 18 }} component={PreventionServiceProgress} />
	),
	catastropheWarning: (
		<Icon style={{ fontSize: 18 }} component={CatastropheWarning} />
	),
	publicityEducationList: (
		<Icon style={{ fontSize: 18 }} component={PublicityEducationList} />
	),
};

const loopMenuItem = (menus) =>
	menus.map(({ icon, routes, ...item }) => ({
		...item,
		icon: icon && IconMap[icon],
		routes: routes && loopMenuItem(routes),
	}));

export async function getUserInfo() {
	const userInfo = await axios
		.get(process.env.REACT_APP_API_URL + '/getUserByToken', {
			headers: {
				token: getToken(),
			},
		})
		.then((response) => {
			const { data, status } = response;
			if (Number(status) === 200) {
				return data;
			}
		})
		.then((result) => {
			if (result.code === 0 && result.success) {
				return result.data;
			} else {
				return null;
			}
		});

	const menu = loopMenuItem(MENU);

	const roleMenu = userInfo.roleMenu?.split(',');

	return {
		menu: isEmpty(roleMenu) ? [] : filterMenu(menu, roleMenu),
		// menu:menu,
		userInfo,
	};
}
const filterMenu = (menuList, menuCode) => {
	return menuList
		.filter((item) => {
			return menuCode.indexOf(item.id) > -1;
		})
		.map((item) => {
			item = Object.assign({}, item);
			if (item.routes) {
				item.routes = filterMenu(item.routes, menuCode);
			}
			return item;
		});
};