import React, {Component} from 'react'
import './CommonExample.css'
import './ExampleLayerPage.css'
import {GIS} from "iclient3d-plot-diy";

;
import {Button} from "antd";

export default class ExampleLayerPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            terrainUrl: "",
            geojsonUrl: "https://www.supermapol.com/realspace/services/data-cbd/rest/data/datasources/%E4%BA%8C%E7%BB%B4%E6%95%B0%E6%8D%AE/datasets/Building/features.geojson",
            superMapImageryUrl: "https://www.supermapol.com/realspace/services/map-scyx/rest/maps/China_DARK",
            htmlString: '<h3>正在加载中...</h3>'
        };
    }

    componentDidMount() {
        fetch('./example/ExampleLayerPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
    }

    addDefaultLayer() {
        this.mapFunction.showDefaultLayer();
    }

    addDemLayer() {
        this.mapFunction.updateDemLayer(this.state.terrainUrl, true);
    }
    removeDemLayer() {
        this.mapFunction.removeDemLayer(this.state.terrainUrl, true);
    }

    addGeoJsonLayer() {
        this.mapFunction.showGeoJsonDataSource({
            code: 'id_for_geojson',
            url: this.state.geojsonUrl,
            name: 'geojson',
            stroke: '#ff0000',
            fill: '#dec388',
            strokeWidth: 3,
            markerSymbol: '?'
        }, true);
    }

    hideGeoJsonLayer() {
        this.mapFunction.hideLayer('id_for_geojson');
    }

    addSuperMapImageryLayer() {
        this.mapFunction.showSuperMapImageryProvider({
            code: 'id_for_imagery_provider',
            url: this.state.superMapImageryUrl,
            name: 'supermap_imagery_provider'
        }, true);
    }

    hideSuperMapImageryLayer() {
        this.mapFunction.hideLayer('id_for_imagery_provider');
    }

    render() {
        return (
            <div className={"example"}>
                <h3>图层相关</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         mapRef={this}
                         showDefaultLayer={false}
                    />
                </div>
                <div className={"button_wrapper"}>
                    <Button type="primary" onClick={this.addDefaultLayer.bind(this)}>添加默认图层</Button>
                    <br/>
                    <span>地形服务地址：</span>
                    <input type="text" placeholder={'请输入地形服务地址'}
                           value={this.state['terrainUrl']}
                           onChange={(v) => this.setState({terrainUrl: v.target.value})}/>
                    <Button type="primary" onClick={this.addDemLayer.bind(this)}>添加地形</Button>
                    <Button type="primary" onClick={this.removeDemLayer.bind(this)}>移除地形</Button>
                    <br/>
                    <span>矢量服务地址：</span>
                    <input type="text" placeholder={'请输入矢量服务地址'}
                           value={this.state['geojsonUrl']}
                           onChange={(v) => this.setState({geojsonUrl: v.target.value})}/>
                    <Button type="primary" onClick={this.addGeoJsonLayer.bind(this)}>添加矢量</Button>
                    <Button type="primary" onClick={this.hideGeoJsonLayer.bind(this)}>关闭矢量</Button>
                    <br/>
                    <span>影像服务地址：</span>
                    <input type="text" placeholder={'请输入影像服务地址'}
                           value={this.state['superMapImageryUrl']}
                           onChange={(v) => this.setState({superMapImageryUrl: v.target.value})}/>
                    <Button type="primary" onClick={this.addSuperMapImageryLayer.bind(this)}>添加影像</Button>
                    <Button type="primary" onClick={this.hideSuperMapImageryLayer.bind(this)}>关闭影像</Button>
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}