import React,{Component} from 'react'
import { inject, observer } from 'mobx-react'
import {Alert,Select, Button} from 'antd'
import {Link,withRouter,Redirect} from 'react-router-dom'


const Option = Select.Option


@withRouter
@inject('i18n')
@inject('UserContext')
@observer
export default class NoLang extends Component{
    
    state = {close:true,val:'en'}
    componentWillMount()
    {
        // if(!this.props.i18n.lang)
        //     this.props.i18n.lang = "en"   //等于默认选项
        //this.state = {close:false,val:'en'}
    }
    handleClose=()=>{
        this.setState({close:true})
        
    }

    handleChange=(val)=>
    {
        this.setState({val})
    }
    choose=()=>{
        this.setState({close:true})
        this.props.history.push(`/${this.state.val}${this.props.location.pathname}`)
    }

    pickLang(){
        return (
        <React.Fragment>
            <Select value={this.state.val} placeholder="Language" style={{ width: 120 }} onChange={this.handleChange}>
                <Option value="en">English</Option>
                <Option value="cn">简体中文</Option>
            </Select>
            <Button onClick={this.choose} type="primary" >Choose</Button>
        </React.Fragment>
        )
    }
    render(){
        
        if(this.props.i18n.lang)
        {
           return  <Redirect to={`/${this.props.i18n.lang}${this.props.location.pathname}`} />
        }

        return <React.Fragment>
            {
                !this.state.close?
            <Alert
                message="Please select your language:"
                description={this.pickLang()}
                type="info"
                showIcon
                closable
                afterClose={this.handleClose}
                />
            :null
            }
            
            {
                this.props.children
            }
        </React.Fragment>
    }
} 