import React, { Component } from "react";
import PubSub from 'pubsub-js';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

class CreateMapForm extends Component {
	map_name = '';

    componentDidMount(){
        PubSub.subscribe('body.map.got', () => {       
           
        });
    }

	createHandle = () => {
		if(this.map_name !== ''){
			PubSub.publish('editor.map.create', {id:window.editor_user.id, name: this.map_name});
		}
	}

	changeHandle = (e) => {
		this.map_name = e.target.value;
	}

	render (){
		return (
            <Form>
				<Form.Group controlId="mapName">
					<Form.Label>地图名称</Form.Label>
					<Form.Control 
						type="text"
						placeholder=""
						aria-label="mapName"
						aria-describedby="mapName"
						onChange={e => {this.changeHandle(e)}} 
					/>
				</Form.Group>
				<Form.Label style={{color: 'red', fontSize: '12px'}}>请输入地图名称</Form.Label><br/><br/>
				<Button variant="primary" type="submit" onClick={this.createHandle}>
					创建
				</Button>
			</Form>
        )
	}
}

export default CreateMapForm;