import { ButtonAccess } from '@/components';
import { auth, business } from '@/services';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
import { Modal, message } from 'antd';
import React, { useState } from 'react';

interface IEmployeeStatusProps {
	permission: string;
	onFinish: () => void;
	employeeId: BusinessAPI.EmployeeVO['employeeId'];
}

const EmployeeDisable: React.FC<IEmployeeStatusProps> = (props) => {
	const { permission, onFinish, employeeId } = props;
	const [open, setOpen] = useState(false);

	const showDisableConfirm = (
		employeeId: BusinessAPI.EmployeeVO['employeeId'],
	) => {
		Modal.confirm({
			title: '您确定要封禁此员工吗？',
			icon: <ExclamationCircleFilled />,
			content: '封禁员工后，该员工将无法登录，已经登录的该员工账号将会下线。',
			okText: '确定',
			okType: 'danger',
			cancelText: '取消',
			onOk: async () => {
				const { success } = await business.employee.destroyEmployee({
					employeeId: employeeId,
				});

				if (success) {
					message.success('封禁员工成功');
					onFinish();
					return true;
				}
			},
			onCancel() {},
		});
	};

	return (
		<>
			<ModalForm<AuthAPI.OpenSafeCmd>
				title={'二级验证'}
				open={open}
				onOpenChange={() => setOpen(false)}
				onFinish={async (values) => {
					const { success } = await auth.userAuth.openSafe(values);
					if (success) {
						return true;
					}
				}}
			>
				<ProFormText
					name={'password'}
					label={'管理员密码'}
					placeholder="请输入密码"
					required={true}
					rules={[
						{
							required: true,
							message: '请输入密码',
						},
					]}
					fieldProps={{
						type: 'password',
					}}
				/>
			</ModalForm>
			<ButtonAccess
				permission={permission}
				danger={true}
				type={'link'}
				onClick={() => showDisableConfirm(employeeId)}
			>
				账号封禁
			</ButtonAccess>
		</>
	);
};

export default EmployeeDisable;
