import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Radio } from 'antd';
// import { useIntl } from '@umijs/max';

import { InputHtml } from '.';
import FileUpload from './FileUpload';

class SVGModal extends Component {
	static propTypes = {
		onOk: PropTypes.func.isRequired,
		onCancel: PropTypes.func,
		visible: PropTypes.bool.isRequired,
	};

	state = {
		loadType: 'file',
		visible: false,
	};

	UNSAFE_componentWillReceiveProps(nextProps) {
		if (nextProps.visible !== this.props.visible) {
			this.setState({
				visible: nextProps.visible,
			});
		}
	}

	handleChangeSvgType = e => {
		this.props.form.resetFields();
		this.setState({
			loadType: e.target.value,
		});
	};

	handleOk = () => {
		const { form, onOk } = this.props;
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			if (values.svg instanceof Blob) {
				const reader = new FileReader();
				reader.readAsDataURL(values.svg);
				reader.onload = () => {
					onOk({ ...values, svg: reader.result });
				};
			} else {
				onOk(values);
			}
		});
	};

	handleCancel = () => {
		const { onCancel } = this.props;
		if (onCancel) {
			onCancel();
			return;
		}
		this.setState({
			visible: false,
		});
	};

	render() {
		const { form } = this.props;
		const { loadType, visible } = this.state;
		return (
			<Modal
				title={"intl.formatMessage({ id: 'fabric.imagemap.svg.add-svg', defaultMessage: '$$$' })" }
				closable
				onCancel={this.handleCancel}
				onOk={this.handleOk}
				visible={visible}
			>
				<Form colon={false}>
					<Form.Item label={ "intl.formatMessage({ id: 'fabric.common.type', defaultMessage: '$$$' })"}>
						{form.getFieldDecorator('loadType', {
							initialValue: loadType,
						})(
							<Radio.Group onChange={this.handleChangeSvgType}>
								<Radio.Button value="file">{ "intl.formatMessage({ id: 'fabric.common.file', defaultMessage: '$$$' })"}</Radio.Button>
								<Radio.Button value="svg">{ "intl.formatMessage({ id: 'fabric.common.svg', defaultMessage: '$$$' })"}</Radio.Button>
							</Radio.Group>,
						)}
					</Form.Item>
					<Form.Item label={"intl.formatMessage({ id: loadType === 'svg' ? 'fabric.common.svg' : 'fabric.common.file', defaultMessage: '$$$' })"}>
						{form.getFieldDecorator('svg', {
							rules: [
								{
									required: true,
									message: "intl.formatMessage({ id: 'fabric.validation.enter-property', defaultMessage: '$$$' })",
								},
							],
						})(loadType === 'svg' ? <InputHtml /> : <FileUpload accept=".svg" />)}
					</Form.Item>
				</Form>
			</Modal>
		);
	}
}

export default Form.create()(SVGModal);
