import React from 'react';
import {
	Upload,
	Input,
	Button,
	Select,
	Icon,
	Row,
	Col,
	message,
	Tag,
	Tooltip,
	Card,
	Divider,
	Switch,
	InputNumber,
	Form,
} from 'antd';
import AceEditor from 'react-ace';
import 'brace/mode/javascript';
import UUID from 'react-native-uuid';
const FormItem = Form.Item;
const Option = Select.Option;
const types = {
	string: '字符',
	number: '数字',
	boolean: '布尔值',
	method: '公式',
	regexp: '正则表达式',
	integer: '整数',
	float: '浮点数',
	array: '列表',
	object: '对象',
	enum: '枚举',
	date: '日期',
	url: '超链接',
	hex: '16进制数',
	email: '邮箱',
	any: '任意',
};

class Enums extends React.Component {
	state = {
		inputVisible: false,
		inputValue: '',
	};

	handleClose = (removedTag) => {
		const tags = this.props.value.filter((tag) => tag !== removedTag);
		this.props.onChange(tags);
	};

	showInput = () => {
		this.setState({ inputVisible: true }, () => this.input.focus());
	};

	handleInputChange = (e) => {
		this.setState({ inputValue: e.target.value });
	};

	handleInputConfirm = () => {
		const { inputValue } = this.state;
		let tags = this.props.value;
		if (inputValue && tags.indexOf(inputValue) === -1) {
			tags = [...tags, inputValue];
		}

		this.setState({
			inputVisible: false,
			inputValue: '',
		});
		this.props.onChange(tags);
	};

	saveInputRef = (input) => (this.input = input);

	render() {
		const { inputVisible, inputValue } = this.state;
		const tags = this.props.value;
		return (
			<div>
				{tags.map((tag, index) => {
					const isLongTag = tag.length > 20;
					const tagElem = (
						<Tag key={tag} onClose={() => this.handleClose(tag)}>
							{isLongTag ? `${tag.slice(0, 20)}...` : tag}
						</Tag>
					);
					return isLongTag ? (
						<Tooltip title={tag} key={tag}>
							{tagElem}
						</Tooltip>
					) : (
						tagElem
					);
				})}
				{inputVisible && (
					<Input
						ref={this.saveInputRef}
						type="text"
						size="small"
						style={{ width: 78 }}
						value={inputValue}
						onChange={this.handleInputChange}
						onBlur={this.handleInputConfirm}
						onPressEnter={this.handleInputConfirm}
					/>
				)}
				{!inputVisible && (
					<Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
						<Icon type="plus" /> New Tag
					</Tag>
				)}
			</div>
		);
	}
}

export default class Validator extends React.Component {
	constructor(props) {
		super(props);
		const value = props.value || [];

		this.state = { rules: value };
	}
	triggerChange = (changedValue) => {
		// Should provide an event to pass value to Form.
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			const value = nextProps.value;
			this.setState(value);
		}
	}
	change = (i, t, e) => {
		const { rules } = this.state;
		if (t == 'message' || t == 'pattern') {
			rules[i][t] = e.target.value;
		} else {
			rules[i][t] = e;
			if (t == 'type' && e == 'date') {
				rules[i].validatorFunc =
					"var errors = [];if (!( typeof value.getTime === 'function' &&typeof value.getMonth === 'function' &&typeof value.getYear === 'function')) {errors.push(new Error('请输入日期!', rule.field));} callback(errors);";
			}
		}

		if (!('value' in this.props)) {
			this.setState({ rules });
		}
		this.triggerChange(rules);
	};
	add = () => {
		const { rules } = this.state;
		rules.push({ id: UUID.v4(), message: '请输入' });
		if (!('value' in this.props)) {
			this.setState({ rules });
		}
		this.triggerChange(rules);
	};
	delete = (i) => {
		const { rules } = this.state;
		rules.splice(i, 1);
		if (!('value' in this.props)) {
			this.setState({ rules });
		}
		this.triggerChange(rules);
	};
	render() {
		const { rules } = this.state;
		return (
			<div>
				<Button size="small" type="primary" style={{ margin: 'auto' }} onClick={this.add}>
					新增
				</Button>
				<div style={{ minHeight: 10 }}>
					{rules.map((r, i) => (
						<div key={r.id}>
							<FormItem label="类型" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<Select
									style={{ width: 150 }}
									onChange={this.change.bind(this, i, 'type')}
									value={r.type}>
									{Object.keys(types).map((ty) => (
										<Option key={ty} value={ty}>
											{types[ty]}
										</Option>
									))}
								</Select>
							</FormItem>

							<FormItem label="是否必填" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<Switch onChange={this.change.bind(this, i, 'required')} checked={r.required} />
							</FormItem>
							<FormItem label="正则表达式" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<Input onChange={this.change.bind(this, i, 'pattern')} value={r.pattern} />
							</FormItem>
							<FormItem label="最小值" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<InputNumber onChange={this.change.bind(this, i, 'min')} value={r.min} />
							</FormItem>
							<FormItem label="最大值" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<InputNumber onChange={this.change.bind(this, i, 'max')} value={r.max} />
							</FormItem>
							<FormItem label="长度" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<InputNumber onChange={this.change.bind(this, i, 'len')} value={r.len} />
							</FormItem>
							<FormItem
								label={
									<span>
										<span style={{ color: 'red' }}> * </span>
										错误提示
									</span>
								}
								labelCol={{ span: 8 }}
								wrapperCol={{ span: 16 }}>
								<Input onChange={this.change.bind(this, i, 'message')} value={r.message} />
							</FormItem>
							<FormItem label="枚举" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<Enums onChange={this.change.bind(this, i, 'enum')} value={r.enum || []} />
							</FormItem>
							<FormItem label="自定义验证" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
								<AceEditor
									height={300}
									width="100%"
									onChange={this.change.bind(this, i, 'validatorFunc')}
									placeholder="var errors = [];\n
if (value == 'xxx') {
errors.push(new Error('请输入正确值!', rule.field));
}
callback(errors);
"
									mode={'javascript'}
									theme={'textmate'}
									fontSize={12}
									showPrintMargin={true}
									showGutter={true}
									highlightActiveLine={true}
									value={r.validatorFunc}
									name="UNIQUE_ID_OF_DIV"
									// keyboardHandler="vim"
									setOptions={{
										enableBasicAutocompletion: true,
										enableLiveAutocompletion: true,
										enableSnippets: true,
										showLineNumbers: true,
										tabSize: 2,
									}}
									editorProps={{ $blockScrolling: true }}
								/>
							</FormItem>

							<Button
								type="danger"
								style={{ margin: 'auto' }}
								size="small"
								onClick={this.delete.bind(this, i)}>
								删除
							</Button>
						</div>
					))}
				</div>
			</div>
		);
	}
}