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

function MapManageItem({map}){	
	function convertToLocaleDateTime(utcTimeString) {
		// 创建一个Date对象，传入UTC时间字符串
		var utcDate = new Date(utcTimeString);
	
		// 获取年月日时分秒
		var year = utcDate.getFullYear();
		var month = ("0" + (utcDate.getMonth() + 1)).slice(-2); // 月份从0开始，所以加1
		var day = ("0" + utcDate.getDate()).slice(-2);
		var hours = ("0" + utcDate.getHours()).slice(-2);
		var minutes = ("0" + utcDate.getMinutes()).slice(-2);
		var seconds = ("0" + utcDate.getSeconds()).slice(-2);
	
		// 返回格式化的日期时间字符串
		return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
	}

	function renameHandle(){
		// PubSub.publish('editor.map.rename', {id: map.map_id});
	}

	function editHandle(){
		PubSub.publish('editor.map.edit', {id: map.map_id});
	}

	function deleteHandle(){
        PubSub.publish('manage.map.delete', map.map_id);
	}

	return (
		<>
			<ListGroup.Item>
				<span style={{fontSize: "20px"}}>地图名：{map.map_name}</span><br/>
				<span style={{fontSize: "16px"}}>地图ID：{map.map_uuid}</span><br/>
				<span style={{fontSize: "13px"}}> 保存时间：{convertToLocaleDateTime(map.update_time)}</span><br/>
				<span style={{fontSize: "13px"}}> 创建时间：{convertToLocaleDateTime(map.create_time)}</span><br/><br/>
				<Button className="mr-2" variant="primary" size='sm' onClick={renameHandle} disabled>重命名</Button>
				<Button className="mr-2" variant="primary" size='sm' onClick={editHandle}>编辑</Button>
				<Button className="mr-2" variant="danger" size='sm' onClick={deleteHandle}>删除</Button>
			</ListGroup.Item>
		</>
	)
}

class MapManageList extends Component {
	state = {
        items: [],
        message: false,
        showDelete: false,
        deletingMap: 0,
    }

    componentDidMount(){
        PubSub.subscribe('body.map.got', () => {       
            // this.setState({items: []});
            this.refreshData();
            this.setState({message: true});
            setTimeout(() => {
                this.setState({message: false});
            }, 1000);
        });

        PubSub.subscribe('manage.map.delete', (msg, data) => {            
            this.setState({showDelete: true, deletingMap: data});
        })

        this.refreshData();
    }

    componentWillUnmount(){
        PubSub.unsubscribe('body.map.got');
    }

	refreshData(){
        let its = []
		for (let i = 0; i < window.editor_user.maps.length; i++) {
			const map = window.editor_user.maps[i];
			its.push(<MapManageItem map={map} key={map.map_id}/>);
		}
        this.setState({items: its});
        // console.log('refresh manage list', window.editor_user.maps, this.state.items);
	}

    closeDelete = () => {
        // console.log('close');
        this.setState({showDelete: false});
    }

    clickDelete = () => {
		PubSub.publish('editor.map.delete', {id: this.state.deletingMap});
        this.closeDelete();
    }

	render(){
        return (
            <>
                <ListGroup style={{width: "100%"}}>
                    {this.state.items}
                </ListGroup>

                <Modal
                    size="sm"
                    show={this.state.message}
                    // onHide={() => setSmShow(false)}
                    aria-labelledby="example-modal-sizes-title-sm"
                >
                    <Modal.Header>
                        <Modal.Title id="example-modal-sizes-title-sm">
                            操作成功
                        </Modal.Title>
                    </Modal.Header>
                </Modal>
                
                <Modal size="sm" show={this.state.showDelete} style={{zIndex: 20010}}>
                    <Modal.Header>
                        <Modal.Title>删除地图</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        确认删除这个地图吗？
                    </Modal.Body>

                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.closeDelete}>
                            取消
                        </Button>

                        <Button variant="primary" onClick={this.clickDelete}>
                            确认
                        </Button>
                    </Modal.Footer>
                </Modal>
            </>
        )
    } 
}

export default MapManageList;