import React , { useEffect , useState } from 'react';
import { Menu } from 'antd';
import Base from './Base';
import Password from './Password';
import './Index.scss';
import '../../SecuritySetting/notice/manager/Index.scss';

function Index(props){
  const { pathname } = props && props.location;

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

  useEffect(()=>{
    if(pathname){
      if(pathname === `/settings/profile`){
        setKey("0");
      }else{
        setKey("1");
        switch(pathname){
          case '/settings/phone':
            setType('3');
            break;
          case '/settings/emails':
            setType('0');
            break;
          case '/settings/password':
            setType('1');
            break;
          default:
            setType('2');
        }
      }
    }
  },[pathname])

  return(
    <div className="notice01">
      <div className="sshHead personalInfo mb20">
        {key === "0" ? <Menu mode={'horizontal'} className="infosRightMenu">
          <Menu.Item key="0" className="font-16">基本资料</Menu.Item>
        </Menu> : <Menu mode={'horizontal'} className="infosRightMenu" selectedKeys={type}>
          <Menu.Item key="3" className="font-16" onClick={()=>{props.history.push('/settings/phone')}}>手机号管理</Menu.Item>
          <Menu.Item key="0" className="font-16" onClick={()=>{props.history.push('/settings/emails')}}>邮箱管理</Menu.Item>
          <Menu.Item key="1" className="font-16" onClick={()=>{props.history.push('/settings/password')}}>密码管理</Menu.Item>
          <Menu.Item key="2" className="font-16" onClick={()=>{props.history.push('/settings/cancel')}}>账号注销</Menu.Item>
        </Menu>}
      </div>
      <div>
        {
          key === "0" ?
          <Base {...props}/>
          :
          <Password {...props} type={type}/>
        }
      </div>
    </div>
  )
}
export default Index;