import { useEffect, useCallback } from 'react';
import { Modal, Form, Select } from 'antd';
import { useUnBindChanles } from '../../../../hooks/video';

interface Iprops {
	onOk?: (values: { channel_id: number }) => void;
	visible?: boolean;
	onCancle?: () => void;
	loading?: boolean;
}
const bindChanleModal: React.FC<Iprops> = ({
	onOk,
	visible,
	onCancle,
	loading,
}) => {
	const [form] = Form.useForm();
	const {
		state: chanleListState,
		request: requestChanleList,
	} = useUnBindChanles();
	useEffect(() => {
		requestChanleList();
	}, []);
	useEffect(() => {
		form && form.resetFields();
	}, [visible]);
	const handleOK = useCallback(() => {
		form
			.validateFields()
			.then((data: any) => {
				onOk && onOk(data);
			})
			.catch((error) => {});
	}, [onOk, form]);
	return (
		<Modal
			title='绑定摄像头'
			visible={visible}
			onOk={handleOK}
			okButtonProps={{ loading }}
			onCancel={onCancle}>
			<Form form={form}>
				<Form.Item
					name='channel_id'
					required
					rules={[{ required: true, message: '请选择摄像头' }]}
					label='摄像头'
					children={
						<Select
							loading={chanleListState.loading}
							showSearch={false}
							placeholder='请输入摄像头'
							options={chanleListState.dataSource.map((element) => {
								return {
									label: element.name,
									value: element.id,
								};
							})}></Select>
					}></Form.Item>
			</Form>
		</Modal>
	);
};
export default bindChanleModal;
