import { ProFormDependency, ProFormSelect } from '@ant-design/pro-components';
import { Button } from 'antd';
import { FC } from 'react';
import { useContextMenu } from 'react-contexify';
import ClickMenu from './ClickMenu';

const MenuPathPicker: FC<any> = (props) => {
	const MENU_ID = `menu-path-picker-${Math.random().toString(36).substr(2, 9)}`;

	const { show, hideAll } = useContextMenu({
		id: MENU_ID,
	});

	return (
		<ProFormDependency name={[props.name]}>
			{(data, form) => {
				const value = data[props.name];
				return (
					<>
						<ProFormSelect
							{...props}
							readonly
							fieldProps={{
								...props.fieldProps,
								value: value?.path,
								onClick: (event) =>
									show({
										event,
										props: {
											onFinish: (value: any) => {
												hideAll();

												form.setFieldValue(props.name, value);
												console.log(value);
											},
										},
									}),
							}}
							addonAfter={
								<Button
									type="link"
									onClick={(event) =>
										show({
											event,
											props: {
												onFinish: (value: any) => {
													hideAll();

													form.setFieldValue(props.name, value);
													console.log(value);
												},
											},
										})
									}
								>
									选择页面
								</Button>
							}
						/>
						<ClickMenu id={MENU_ID} />
					</>
				);
			}}
		</ProFormDependency>
	);
};

export default MenuPathPicker;
