import { Button, Drawer, Input, message } from 'antd';
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'dva';
import ButtonDiy from '@/baseComponent/ButtonDiy';

const { TextArea } = Input;

function EditDrawer(props) {
	const { dispatch, templateData, TEMPLATE } = props;

	const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
	const saveTimeOut = useRef();
	const [lowCodeEdit, setLowCodeEdit] = useState({});

	useEffect(
		() => {
			if (templateData) {
				setLowCodeEdit({ ...templateData });
			}
		},
		[templateData],
	);

	const onClose = () => {
		setShowEdit(!showEdit);
	};

	const handleSaveTemplate = () => {
		const content = JSON.stringify(lowCodeEdit);
		message.info('正在保存数据,请耐心等待');
		dispatch({
			type: 'lowCode_design/saveTemplateApi',
			payload: {
				name: lowCodeEdit.name,
				content,
				TEMPLATE,
			},
			callback: () => {
				saveTimeOut.current = null;
			},
		});
	};
	const changeKey = (value, key) => {
		let newCodeEdit = lowCodeEdit;
		newCodeEdit[key] = value;
		setLowCodeEdit(newCodeEdit);
	};

	// TODO localStorage 事件中获取的state 不是最新的.

	const handleLocalStorageSave = (e) => {
		if (e.key === 'edit-low-code-local') {
			const newV = e.newValue;
			if (newV && newV.length > 20) {
				changeKey(newV, 'beforeShow');
				if (!saveTimeOut.current) {
					// saveTimeOut.current = window.setTimeout(() => {
					//   handleSaveTemplate();
					// }, 500);
				}
			}
		}
	};

	useEffect(
		() => {
			if (lowCodeEdit?.beforeShow) {
				window.addEventListener('storage', handleLocalStorageSave);
			}
			return () => {
				window.removeEventListener('storage', handleLocalStorageSave);
			};
		},
		[lowCodeEdit.beforeShow],
	);

	const editFullScreen = () => {
		localStorage.setItem('edit-low-code-local', lowCodeEdit['beforeShow']);
		if(process.env.NODE_ENV === 'development'){
      window.open('http://scjoyedu.eicp.net:51352/wisdomSchool/#/quanPingBianji');
    }
		window.open(window.location.origin + '/wisdomSchool/#/quanPingBianji');
	};

	return (
		<>
			<Drawer
				title="编辑"
				placement="right"
				onClose={onClose}
				visible={showEdit}
				width={700}
				maskClosable={false}>
				<TextArea
					autoSize={{
						minRows: 5,
						maxRows: 10,
					}}
					value={JSON.stringify(templateData, null, '\t')}
					disabled={true}
					style={{ marginBottom: '20px' }}
				/>
				挂载前执行
				<ButtonDiy name={'全屏编辑'} handleClick={editFullScreen} type={'danger'} />
				<TextArea
					autoSize={{
						minRows: 10,
						maxRows: 20,
					}}
					defaultValue={lowCodeEdit?.beforeShow || ''}
					onChange={(e) => {
						changeKey(e.target.value, 'beforeShow');
					}}
					// readOnly={true}
					style={{ marginBottom: '20px' }}
				/>
				<Button onClick={handleSaveTemplate} type={'primary'}>
					保存
				</Button>
			</Drawer>
			<div
				style={{
					height: '10px',
					width: '10px',
					cursor: 'pointer',
				}}
				onClick={() => {
					setShowEdit(!showEdit);
				}}
			/>
		</>
	);
}

export default connect(({ lowCode_design }) => {
	return {
		templateData: lowCode_design.templateData,
	};
})(EditDrawer);
