import { UserSearch } from '@/components';
import { useIntl } from '@@/exports';
import {
	ProFormDependency,
	ProFormSelectProps,
} from '@ant-design/pro-components';

export type IUserSelectProps = ProFormSelectProps;

export default function UserSelect(props: IUserSelectProps) {
	const intl = useIntl();

	return (
		<ProFormDependency name={['userVO', 'canChangeUser']}>
			{({ userVO, canChangeUser }, form) => {
				console.log('userVO', userVO);
				return (
					<UserSearch
						{...(canChangeUser !== undefined && {
							readonly: !canChangeUser,
						})}
						className={'user-select'}
						form={form}
						{...(userVO && { selectedList: [userVO] })}
						label={intl.formatMessage({
							id: 'form.userId.label',
						})}
						transform={(userVO) => {
							return {
								userVO: userVO,
								userId: userVO.userId,
							};
						}}
						name={'userVO'}
						required={true}
						convertValue={(userVO) => {
							return `(ID: ${userVO?.userId}) ${userVO?.nickname || userVO?.name}`;
						}}
						placeholder={intl.formatMessage({
							id: 'form.userId.placeholder',
						})}
						rules={[
							{
								required: true,
								message: intl.formatMessage({
									id: 'form.userId.required',
								}),
							},
						]}
						{...props}
					/>
				);
			}}
		</ProFormDependency>
	);
}
