import React , { useEffect , useState } from 'react';
import './Index.scss';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import Base from './Base';
import Password from './Password';

function Index(props){
  const { username } = props && props.match && props.match.params;
  const { pathname } = props && props.location;
  const { current_user } = props;

  useEffect(()=>{
    if((username && current_user && (current_user.login !== username))){
      props.history.push(`/users/${username}`);
    }
  },[current_user,username])

  const [ key , setKey ] = useState("0");

  useEffect(()=>{
    if(pathname){
      if(pathname === `/users/${username}/info`){
        setKey("0");
      }else{
        setKey("1");
      }
    }
  },[pathname])


  return(
    <div>
      <Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
        <Menu.Item key="0"><Link to={`/users/${username}/info`}>基本资料</Link></Menu.Item>
        <Menu.Item key="1"><Link to={`/users/${username}/password`}>密码管理</Link></Menu.Item>
      </Menu>
      <div style={{padding:"20px"}}>
        {
          key === "0" ?
          <Base {...props}/>
          :
          <Password {...props}/>
        }
        
      </div>
    </div>
  )
}
export default Index;