import React, { Component } from 'react'
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
import { TabBar, NavBar } from 'antd-mobile';
import { connect } from 'react-redux'
import NavLinkBar from '../navlink'

import Boss from '../../container/boss'

function Talent(){
	return <h2>Talent Home</h2>
}

function Msg(){
	return <h2>Msg Home</h2>
}

function Profile(){
	return <h2>Profile Home</h2>
}

@connect(
	state=>state
)
class Dashboard extends Component {

	constructor(props) {
		super(props)
	}

	componentDidMount() {
	}

	render() {
		const { user } = this.props
		const { pathname } = this.props.location
		const navList = [
			{
				path: '/boss',
				text: 'Boss',
				icon: 'boss',
				title: 'Boss List',
				component: Talent,
				hide: user.type==='boss'
			},
			{
				path: '/talent',
				text: 'Talent',
				icon: 'talent',
				title: 'Talents List',
				component: Boss,
				hide: user.type==='talent'
			},
			{
				path: '/msg',
				text: 'Messages',
				icon: 'msg',
				title: 'Messages List',
				component: Msg,
			},
			{
				path: '/me',
				text: 'Profile',
				icon: 'profile',
				title: 'Profile',
				component: Profile
			}
		]

		console.log(navList)

		return(
			<div>
				<NavBar
					className='fixed-header'
					mode='dark'
				>{navList.find(v=>v.path===pathname).text}</NavBar>
				<div style={{marginTop:45}}>
					<Switch>
						{navList.map(v=>(
							<Route
								key={v.path}
								path={v.path}
								component={v.component}>
							</Route>
						))}
					</Switch>
				</div>
				<NavLinkBar navList={navList} />
			</div>
		)
	}
}

export default Dashboard