import { useCallback, useEffect, useState, useMemo, Fragment } from 'react';
import {
	Table,
	Row,
	Button,
	Badge,
	Typography,
	Input,
	Col,
	PageHeader,
	Space,
	Modal,
	message,
} from 'antd';
import { ColumnProps } from 'antd/lib/table';
import { RouteComponentProps } from 'react-router-dom';
import {
	usVideoDeviceList,
	VideoStatus,
	VideoState,
	VideorecordProps,
} from '../../hooks/video';
import { usPutDevice } from '../../hooks/device';
const { Text } = Typography;
const { Search } = Input;
const colums: ColumnProps<VideorecordProps>[] = [
	{
		title: '供应商',
		dataIndex: 'provider_name',
		key: 'provider_name',
	},
	{
		title: '设备名',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '国标编号',
		dataIndex: 'sn',
		key: 'sn',
	},
	{
		title: '传输模式',
		dataIndex: 'media_transport',
		key: 'media_transport',
	},
	{
		title: '通道数',
		dataIndex: 'channel_count',
		key: 'channel_count',
	},
	{
		title: 'IP',
		dataIndex: 'ip',
		key: 'ip',
	},
	{
		title: '端口',
		dataIndex: 'port',
		key: 'port',
	},
	{
		title: '状态',
		dataIndex: 'state',
		key: 'state',
		render: (dataIndex) => {
			const online = dataIndex === 1;
			return (
				<>
					<Badge status={online ? 'success' : 'error'}></Badge>
					<Text type={online ? 'success' : 'secondary'}>
						{VideoState[dataIndex as 0 | 1]}
					</Text>
				</>
			);
		},
	},
	{
		title: '确认状态',
		dataIndex: 'status',
		key: 'status',
		render: (dataIndex) => VideoStatus[dataIndex as 0 | 1 | 2],
	},
];
const videos: React.FC<RouteComponentProps> = ({ history }) => {
	const {
		state: deviceListState,
		request: requestDeviceList,
	} = usVideoDeviceList();
	const [videoListSearchState, setVideoListSearchState] = useState({
		page: 1,
		filter: '',
	});
	const { state: putState, request: requestPutVedio } = usPutDevice();
	useEffect(() => {
		requestDeviceList(videoListSearchState);
	}, [videoListSearchState]);

	const tableColums: ColumnProps<VideorecordProps>[] = useMemo(() => {
		return colums.concat({
			title: '操作',
			render: (record) => (
				<Space>
					<Button
						disabled={record.status !== 0}
						type='primary'
						onClick={() => handleReviewVideo(record)}>
						审核
					</Button>
					<Button
						disabled={record.status !== 1}
						onClick={() => {
							history.push('/admin/device/chanle/' + record.sn);
						}}>
						查看通道
					</Button>
				</Space>
			),
		});
	}, [deviceListState.dataSource]);

	const handleReviewVideo = useCallback((record: VideorecordProps) => {
		const modalInstace = Modal.confirm({
			title: '确认设备',
			closable: true,
			content: '是否确认为当前项目设备',
			okButtonProps: {
				loading: putState.loading,
			},
			okText: '确认',
			cancelButtonProps: {
				danger: true,
				onClick: () => {
					requestReviewVideo({
						id: record.id,
						status: false,
						device_code: record.type_code,
					}).then(() => {
						modalInstace.destroy();
					});
				},
			},
			cancelText: '拒绝',
			onOk: () =>
				requestReviewVideo({
					id: record.id,
					status: true,
					device_code: record.type_code,
				}),
		});
	}, []);
	const requestReviewVideo = (data: {
		id: number;
		status: boolean;
		device_code: number;
	}) => {
		return requestPutVedio(data)
			.then(() => {
				message.success('审核设备成功');
				requestDeviceList(videoListSearchState);
			})
			.catch((error) => {
				message.error(error.message);
			});
	};
	return (
		<Fragment>
			<PageHeader title='视频监控' style={{ paddingLeft: 0 }}></PageHeader>

			<Row gutter={[0, 30]}>
				<Col span={4}>
					<Search
						placeholder='设备唯一编码'
						onSearch={(value) => {
							setVideoListSearchState((preState) => ({
								...preState,
								page: 1,
								filter: value,
							}));
						}}></Search>
				</Col>
			</Row>
			<Table
				rowKey={(record) => record.id}
				pagination={{
					hideOnSinglePage: true,
					total: deviceListState.total,
					current: deviceListState.page,
					onChange: (page) => {
						setVideoListSearchState((preState) => ({ ...preState, page }));
					},
				}}
				columns={tableColums}
				dataSource={deviceListState.dataSource}
				loading={deviceListState.loading}></Table>
		</Fragment>
	);
};
export default videos;
