class Lang extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lan: "English",
            lanlogo: "language",
            showimg: "1",
        };
    }
    componentWillMount() {
        if (this.props.lan === "kr") {
            this.setState({
                lan: "한국인",
            })
            this.setState({
                lanlogo: "언어"
            })
            this.setState({
                showimg: "2"
            })
        }
        if (this.props.lan === "vn") {
            this.setState({
                lan: "Việt Nam",
            })
            this.setState({
                lanlogo: "ngôn ngữ"
            })
            this.setState({
                showimg: "3"
            })
        }
        if (this.props.lan === "ru") {
            this.setState({
                lan: "Русский",
            })
            this.setState({
                lanlogo: "язык"
            })
            this.setState({
                showimg: "4"
            })
        }
        if (this.props.lan === "id") {
            this.setState({
                lan: "Indonesia",
            })
            this.setState({
                lanlogo: "bahasa"
            })
            this.setState({
                showimg: "5"
            })
        }

        if (this.props.lan === "in") {
            this.setState({
                lan: "इंडी",
            })
            this.setState({
                lanlogo: "भाषा:हिन्दी"
            })
            this.setState({
                showimg: "6"
            })
        }


        if (this.props.lan === "bd") {
            this.setState({
                lan: "বাংলা",
            })
            this.setState({
                lanlogo: "ভাষা"
            })
            this.setState({
                showimg: "7"
            })
        }

        if (this.props.lan === "my") {
            this.setState({
                lan: "Melayu",
            })
            this.setState({
                lanlogo: "Bahasa"
            })
            this.setState({
                showimg: "8"
            })
        }



        if (this.props.lan === "ar") {
            this.setState({
                lan: "عرب",
            })
            this.setState({
                lanlogo: "لغة"
            })
            this.setState({
                showimg: "9"
            })
        }


        if (this.props.lan === "hk") {
            this.setState({
                lan: "繁體中文",
            })
            this.setState({
                lanlogo: "語言"
            })
            this.setState({
                showimg: "10"
            })
        }


        if (this.props.lan === "pt") {
            this.setState({
                lan: "Portugal",
            })
            this.setState({
                lanlogo: "Língua"
            })
            this.setState({
                showimg: "11"
            })
        }

        if (this.props.lan === "tr") {
            this.setState({
                lan: "Türk",
            })
            this.setState({
                lanlogo: "Dil"
            })
            this.setState({
                showimg: "12"
            })
        }


    }
    chooselang(param, event) {
        var str = location.pathname;
        if (this.props.lan !== "index") {
            str = str.substring(3)
            console.log(str);
        }
        if (param === 1) {
            location.href = str
        }
        if (param === 2) {
            location.href = "/kr" + str
        }
        if (param === 3) {
            location.href = "/vn" + str
        }
        if (param === 4) {
            location.href = "/ru" + str
        }
        if (param === 5) {
            location.href = "/id" + str
        }
        if (param === 6) {
            location.href = "/in" + str
        }
        if (param === 7) {
            location.href = "/bd" + str
        }
        if (param === 8) {
            location.href = "/my" + str
        }

        if (param === 9) {
            location.href = "/ar" + str
        }

        if (param === 10) {
            location.href = "/hk" + str
        }

        if (param === 11) {
            location.href = "/pt" + str
        }

        
        if (param === 12) {
            location.href = "/tr" + str
        }
    }
    render() {
        return (
            <div className="menu-item px-5" data-kt-menu-trigger="hover" data-kt-menu-placement="left-start">
                <a href="#" className="menu-link px-5">
                    <span className="menu-title position-relative">{this.state.lanlogo}
                        <span className="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0" id="odossdo">{this.state.lan}
                            <img className="w-15px h-15px rounded-1 ms-2" src="../static/img/media/flags/united-states.svg" style={{ display: this.state.showimg == 1 ? "inline-block" : "none" }} />
                            <img className="rounded-1" src="../static/img/media/flags/krsvg.svg" style={{ display: this.state.showimg == 2 ? "inline-block" : "none" }} />
                            <img className="rounded-1" src="../static/img/media/flags/vnsvg.svg" style={{ display: this.state.showimg == 3 ? "inline-block" : "none" }} />
                            <img className="rounded-1" src="../static/img/media/flags/rusvg.svg" style={{ display: this.state.showimg == 4 ? "inline-block" : "none" }} />
                            <img className="rounded-1" src="../static/img/media/flags/idsvg.svg" style={{ display: this.state.showimg == 5 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                            <img className="rounded-1" src="../static/img/media/flags/insvg.svg" style={{ display: this.state.showimg == 6 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                            <img className="rounded-1" src="../static/img/media/flags/bdsvg.svg" style={{ display: this.state.showimg == 7 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                            <img className="rounded-1" src="../static/img/media/flags/mysvg.svg" style={{ display: this.state.showimg == 8 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                            <img className="rounded-1" src="../static/img/media/flags/arsvg.svg" style={{ display: this.state.showimg == 9 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                            <img className="rounded-1" src="../static/img/media/flags/hksvg.svg" style={{ display: this.state.showimg == 10 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                            <img className="rounded-1" src="../static/img/media/flags/ptsvg.svg" style={{ display: this.state.showimg == 11 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                            <img className="rounded-1" src="../static/img/media/flags/trsvg.svg" style={{ display: this.state.showimg == 12 ? "inline-block" : "none", width: "20px", height: "20px" }} />
                        </span></span>
                </a>

                <div className="menu-sub menu-sub-dropdown w-175px py-4" style={{ display: this.state.showElem }}>

                    <div className="menu-item px-3" id="sdadawewqeq">
                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(1)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/united-states.svg" alt="" />
                            </span>English</a>

                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(2)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/krsvg.svg" alt="" />
                            </span>한국어</a>

                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(3)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/vnsvg.svg" alt="" />
                            </span> Việt Nam</a>

                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(4)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/rusvg.svg" alt="" />
                            </span>Русский</a>

                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(5)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/idsvg.svg" alt="" />
                            </span>Indonesia</a>

                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(6)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/insvg.svg" alt="" />
                            </span>इंडी</a>

                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(7)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/bdsvg.svg" alt="" />
                            </span>বাংলা</a>


                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(8)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/mysvg.svg" alt="" />
                            </span>Melayu</a>


                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(9)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/arsvg.svg" alt="" />
                            </span>عرب</a>


                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(10)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/hksvg.svg" alt="" />
                            </span>繁體中文</a>


                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(11)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/ptsvg.svg" alt="" />
                            </span>Portugal</a>

                        <a href="#" className="menu-link d-flex px-5 " onClick={() => this.chooselang(12)}>
                            <span className="symbol symbol-20px me-4">
                                <img className="rounded-1" src="../static/img/media/flags/trsvg.svg" alt="" />
                            </span>Türk</a>
                            
                    </div>
                </div>
            </div>
        );
    }
}