import React, {Component} from 'react'
import './ExamplePage.css'
import {NavLink} from "react-router-dom";
import "./ExampleLayerPage.css";
import {Button, Input} from "antd";
import {updateLanguage} from "iclient3d-plot-diy";

;

export default class ExamplePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            plotUrl: localStorage.getItem('plot_url') || '',
            plotLanguage: localStorage.getItem('plot_language') || '',
            imageUrl: localStorage.getItem('plot_image') || '',
            demUrl: localStorage.getItem('plot_dem') || '',
            addressSearchUrl: localStorage.getItem('addressSearchUrl') || '',
        };
    }

    componentDidMount() {
    }

    updatePlotUrl(event) {
        localStorage.setItem('plot_url', this.state.plotUrl || '');
        alert('plotUrl服务地址设置成功');
    }

    updateImageUrl(event) {
        localStorage.setItem('plot_image', this.state.imageUrl || '');
        alert('plotUrl服务地址设置成功');
    }

    updateDemUrl(event) {
        localStorage.setItem('plot_dem', this.state.demUrl || '');
        alert('plotUrl服务地址设置成功');
    }

    updateAddressSearchUrl(event) {
        localStorage.setItem('addressSearchUrl', this.state.addressSearchUrl || '');
        alert('plotUrl服务地址设置成功');
    }

    updateLanguage1() {
        updateLanguage('zh-CN')
        alert('切换语言成功');
    }

    updateLanguage2() {
        updateLanguage('en-US')
        alert('切换语言成功');
    }

    updateLanguage3() {
        updateLanguage('fr-FR')
        alert('切换语言成功');
    }

    render() {
        return (
            <div className={"exampleWrapper"}>
                <ul>
                    <li><NavLink to='/example/layer'>图层加载</NavLink></li>
                    <li><NavLink to='/example/hideToolBar'>状态/工具栏显示控制</NavLink></li>
                    <li><NavLink to='/example/customToolBar'>自定义工具栏</NavLink></li>
                    <li><NavLink to='/example/draw'>画图</NavLink></li>
                    <li><NavLink to='/example/tools'>工具栏功能</NavLink></li>
                    <li><NavLink to='/example/bh'>标绘分组</NavLink></li>
                    <li><NavLink to='/example/bp'>拨盘</NavLink></li>
                    <li><NavLink to='/example/blc'>比例尺切换</NavLink></li>
                    <li><NavLink to='/example/fwy'>方位距离圆</NavLink></li>
                    <li><NavLink to='/example/i18n'>多语言</NavLink></li>
                    <li><NavLink to='/example/defaultSelect'>初始化事件</NavLink></li>
                    <li><NavLink to='/example/fly'>飞行</NavLink></li>
                    <li><NavLink to='/example/dynamicBlc'>动态比例尺</NavLink></li>
                </ul>
                <div className={"button_wrapper"}>

                    <span>公共plotUrl服务地址：</span>
                    <Input.Group compact>
                        <Input
                            placeholder={'请输入标绘服务地址'}
                            defaultValue={this.state['plotUrl']}
                            onChange={(v) => this.setState({plotUrl: v.target.value})}
                        />
                        <Button type="primary" onClick={this.updatePlotUrl.bind(this)}>设置</Button>
                    </Input.Group>
                    <br/>
                    <span>公共影像图地址：</span>
                    <Input.Group compact>
                        <Input
                            placeholder={'请输入标绘服务地址'}
                            defaultValue={this.state['imageUrl']}
                            onChange={(v) => this.setState({imageUrl: v.target.value})}
                        />
                        <Button type="primary" onClick={this.updateImageUrl.bind(this)}>设置</Button>
                    </Input.Group>
                    <br/>
                    <span>公共Dem地址：</span>
                    <Input.Group compact>
                        <Input
                            placeholder={'请输入标绘服务地址'}
                            defaultValue={this.state['demUrl']}
                            onChange={(v) => this.setState({demUrl: v.target.value})}
                        />
                        <Button type="primary" onClick={this.updateDemUrl.bind(this)}>设置</Button>
                    </Input.Group>
                    <br/>

                    <span>公共地址查询URL：</span>
                    <Input.Group compact>
                        <Input
                            placeholder={'公共地址查询URL'}
                            defaultValue={this.state['addressSearchUrl']}
                            onChange={(v) => this.setState({addressSearchUrl: v.target.value})}
                        />
                        <Button type="primary" onClick={this.updateAddressSearchUrl.bind(this)}>设置</Button>
                    </Input.Group>
                    <br/>
                    <span>公共语言：</span>
                    <Button type="primary" onClick={this.updateLanguage1.bind(this)}>中文</Button>
                    <Button type="primary" onClick={this.updateLanguage2.bind(this)}>英文</Button>
                    <Button type="primary" onClick={this.updateLanguage3.bind(this)}>法语</Button>
                    <br/>
                </div>
            </div>
        )
    }
}