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

;
import {Button} from "antd";

export default class ExampleI18nPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>'
        };
    }

    toolbars = [
        'global',
        'fullscreen',
        'measureDistance',
        'measureArea',
        'seethrough',
        {
            key: 'seethrough2',
            icon: 'seethrough',
            titleI18n: 'seethrough2',
            handleClick: () => {
                alert('new toolbar')
            }
        },
    ];

    i18nObj = {
        seethrough2: {
            'en-US': 'See Through2',
            'zh-CN': '通视分析2',
            'fr-FR': '通视分析2'
        }
    }

    componentDidMount() {

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

    render() {
        return (
            <div className={"example"}>
                <h3>多语言展示，语言切换，允许增加多语言Key</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         mapRef={this}
                         toolbars={this.toolbars}
                         showDefaultLayer={true}
                         i18nObj={this.i18nObj}
                         language={'en-US'}
                    />
                </div>
                <Button onClick={() => {
                    this.mapFunction.updateLanguage('zh-CN');
                }}>中文</Button>
                <Button onClick={() => {
                    this.mapFunction.updateLanguage('en-US');
                }}>英文</Button>
                <Button onClick={() => {
                    this.mapFunction.updateLanguage('fr-FR');
                }}>法语
                </Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}