import * as React from "react"
import * as style from './style.scss'
import { BrowserRouter, Route, Link } from "react-router-dom"

export interface DropDownProps {
    subtitles: Array<Object>,
    title: String
}

class DropDown extends React.Component<DropDownProps, {}> {
    static defaultProps = {
        subtitles: {}
    }
    
    state = {
        isToggleOn: false
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.mouseEnerHandler = this.mouseEnerHandler.bind(this)
        this.mouseLeaveHandler = this.mouseLeaveHandler.bind(this)
        this.hideDropDownMenu = this.hideDropDownMenu.bind(this)
    }
    mouseEnerHandler(event:any) {
        let self = this
        self.setState({
            isToggleOn: true
        })
    }
    mouseLeaveHandler(event: any) {
        this.hideDropDownMenu()
    }
    hideDropDownMenu() {
        let self = this
        self.setState({
            isToggleOn: false
        })
    }
    openInNewTab(url:string) {
        var win = window.open(url, '_blank');
        win.focus();  
    }
    render() {
        return <div className={style.biaoyu} onMouseEnter={this.mouseEnerHandler} onMouseLeave={this.mouseLeaveHandler}>
                {this.props.title}
                {
                    // && location.hash !== '#/'
                    this.state.isToggleOn ? <ul className={style.slideDown}>
                    {
                        this.props.subtitles && this.props.subtitles.map((sub: any) => {
                            if(sub.url === '_blank') {
                                return <li key={sub.id} onClick={() => this.openInNewTab(sub.uri)}>{sub.title}</li>
                            }
                            return  <li key={sub.id} onClick={this.hideDropDownMenu}><Link to={sub.url}>{sub.title}</Link></li>
                        })
                    }
                    </ul>
                    : null
                }
                
            </div>
    }
}

export default DropDown;