import { useEffect, useCallback, useState, useRef } from 'react';
import {
	Button,
	Table,
	Modal,
	Radio,
	Space,
	PageHeader,
	message,
	Badge,
	Typography,
} from 'antd';
import { ColumnProps } from 'antd/lib/table';
import {
	useDustList,
	DustRecordProps,
	DustState,
	DustStatus,
	DustStatusConfis,
} from './hook';
import {
	useBindChanle,
	useUnBindChanle,
	usPutDevice,
} from '../../hooks/device';

const { Text } = Typography;

import BindChanleModal from './components/bindChanle';
const device: React.FC = () => {
	const ApplyStatus = useRef(true);
	const [modalState, setModalState] = useState<{
		visible: boolean;
		values?: DustRecordProps;
	}>({
		visible: false,
	});
	const [searchState, changeSearchState] = useState({ page: 1 });
	const { state: dustListState, request: requestDustList } = useDustList();
	const { state: bindState, request: requestBindChanle } = useBindChanle();
	const { state: revokeState, request: requestRevoke } = useUnBindChanle();
	const { state: putState, request: requestPutDevice } = usPutDevice();
	const [state, setState] = useState<{ reviewStatue: boolean }>({
		reviewStatue: true,
	});
	useEffect(() => {
		requestDustList(searchState);
	}, [searchState]);

	const colums: ColumnProps<DustRecordProps>[] = [
		{
			title: '供应商',
			dataIndex: 'provider_name',
			key: 'provider_name',
		},
		{
			title: '设备名',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '批次',
			dataIndex: 'batch',
			key: 'batch',
		},
		{
			title: '设备唯一编码',
			dataIndex: 'sn',
			key: 'sn',
		},
		/*{
			title: '设备密钥',
			width: 130,
			dataIndex: 'key',
			key: 'key',
		},*/
		{
			title: '申请时间',
			dataIndex: 'created_time',
			key: 'created_time',
		},
		{
			title: '审批时间',
			dataIndex: 'approve_time',
			key: 'approve_time',
		},
		{
			title: '状态',
			dataIndex: 'state',
			key: 'state',
			render: (dataIndex) => {
				const online = dataIndex === 1;
				return (
					<>
						<Badge status={online ? 'success' : 'error'}></Badge>
						<Text type={online ? 'success' : 'secondary'}>
							{DustState[dataIndex as 0 | 1]}
						</Text>
					</>
				);
			},
			//render: (_, record) => DustState[record.state],
		},
		{
			title: '确认状态',
			dataIndex: 'status',
			key: 'status',
			render: (_, record) => DustStatusConfis[record.status],
		},
		{
			title: '操作',
			render: (record) => {
				return (
					<Space>
						<Button
							type={record.status === DustStatus.wait ? 'primary' : 'default'}
							disabled={record.status !== DustStatus.wait}
							size='small'
							onClick={() => handleConfirm(record)}>
							审核
						</Button>
						{!!record.channel_id ? (
							<Button
								size='small'
								danger
								onClick={() => handleRevokeChanle(record)}>
								解绑摄像头
							</Button>
						) : (
							<Button
								size='small'
								onClick={() => {
									setModalState((preState) => ({
										...preState,
										visible: true,
										values: record,
									}));
								}}>
								绑定摄像头
							</Button>
						)}
					</Space>
				);
			},
		},
	];
	/**
	 * @description 审批设备
	 * @param record
	 */
	const handleConfirm = useCallback(
		(record: DustRecordProps) => {
			Modal.confirm({
				title: '审核',
				content: (
					<div>
						<Space>
							确认是否为当前项目设备：
							<Radio.Group
								defaultValue={true}
								onChange={(event) => {
									console.log(event.target.value);
									ApplyStatus.current = event.target.value;
								}}>
								<Radio value={true}>通过</Radio>
								<Radio value={false}>拒绝</Radio>
							</Radio.Group>
						</Space>
					</div>
				),
				okText: '确认',
				cancelText: '取消',
				onOk: () => {
					return requestPutDevice({
						id: record.id,
						device_code: record.type_code,
						status: ApplyStatus.current,
					})
						.then(() => {
							requestDustList(searchState);
							message.success('操作成功');
						})
						.catch((error) => {
							message.error(error.message);
						})
						.finally(() => {
							ApplyStatus.current = true;
						});
				},
				onCancel() {
					ApplyStatus.current = true;
				},
			});
		},
		[Modal]
	);

	/**
	 * @description 绑定摄像头
	 */
	const handleBindChanle = useCallback(
		(data) => {
			requestBindChanle({
				...data,
				device_id: modalState.values?.id,
				device_code: modalState.values?.type_code,
			})
				.then(() => {
					message.success('绑定摄像头成功');
					requestDustList(searchState);
					setModalState((preState) => ({
						...preState,
						visible: false,
						values: undefined,
					}));
				})
				.catch((error) => {
					message.error(error.message);
				});
		},
		[modalState.values, message, requestDustList]
	);
	/**
	 * @description 解绑摄像头
	 */
	const handleRevokeChanle = useCallback(
		(record: DustRecordProps) => {
			Modal.confirm({
				title: '确认解绑摄像头',
				okText: '确认',
				cancelText: '取消',
				okButtonProps: {
					loading: revokeState.loading,
				},
				onOk: () => {
					return requestRevoke({
						device_id: record.id,
						device_code: record.type_code,
					})
						.then(() => {
							requestDustList(searchState);
							message.success('解绑成功');
						})
						.catch((error) => {
							message.error(error.message);
						});
				},
			});
		},
		[requestDustList, message]
	);
	return (
		<div>
			<PageHeader title='扬尘设备'></PageHeader>
			<Table
				rowKey={(record) => record.id}
				columns={colums}
				pagination={{
					current: dustListState.current,
					total: dustListState.total,
					showQuickJumper: false,
					showSizeChanger: false,
					hideOnSinglePage: true,
					onChange: (page) =>
						changeSearchState((preState) => ({ ...preState, page })),
				}}
				loading={dustListState.loading}
				dataSource={dustListState.dataSource}></Table>
			<BindChanleModal
				loading={bindState.loading}
				visible={modalState.visible}
				onCancle={() => {
					setModalState((preState) => ({ ...preState, visible: false }));
				}}
				onOk={handleBindChanle}></BindChanleModal>
		</div>
	);
};
export default device;
