import { FC } from 'react';
import { Item, ItemParams, Menu, Submenu } from 'react-contexify';
import 'react-contexify/ReactContexify.css';

const ClickMenu: FC<{
	id: string;
}> = ({ id }) => {
	const MENU_ID = id;

	const handleItemClick = (item: ItemParams) => {
		switch (item.id) {
			case '不设置':
				break;
			case '查看大图':
				break;
			case '充电首页':
				item?.props.onFinish({
					id: '1',
					name: `充电首页`,
					path: '/pages/main/index/index',
				});
				break;
			case '附近页面':
				item?.props.onFinish({
					id: '1',
					name: `充电首页`,
					path: '/pages/main/near/index',
				});
				break;
			case '我的页面':
				item?.props.onFinish({
					id: '1',
					name: `我的页面`,
					path: '/pages/main/center/index',
				});
				break;
			case '拨打电话':
				break;
			default:
				break;
		}
	};

	return (
		<>
			<Menu
				id={MENU_ID}
				animation={{
					enter: 'fade',
					exit: 'fade',
				}}
			>
				<Item id="不设置" onClick={handleItemClick}>
					不设置
				</Item>
				<Item id="查看大图" onClick={handleItemClick}>
					查看大图
				</Item>
				<Submenu label="页面">
					<Item id="充电首页" onClick={handleItemClick}>
						充电首页
					</Item>
					<Item id="附近页面" onClick={handleItemClick}>
						附近页面
					</Item>
					<Item id="我的页面" onClick={handleItemClick}>
						车主中心
					</Item>
				</Submenu>
				<Item id="拨打电话" onClick={handleItemClick}>
					拨打电话
				</Item>
			</Menu>
		</>
	);
};

export default ClickMenu;
